1

I am having the following Markup and I am trying to justify my list along my uls width like so:

ul {
  width: 100%;
  text-align: justify;
}

ul::after {
  content: '';
  display: inline-block;
  width: 100%;
}

li {
  display: inline-block;
}
<ul>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
</ul>

Actually this is a common method to distribute items along their parents width. But for some reason it doesn't work in my current project. Any ideas you could share?

UPDATE

see this fiddle for a more authentic markup and style I am using: https://jsfiddle.net/gqL8rqje/

Andrzej Ziółek
  • 2,241
  • 1
  • 13
  • 21
Marten Zander
  • 2,385
  • 3
  • 17
  • 32
  • 1
    What's the problem exactly? If it's the horizontal scroll, something like this? https://codepen.io/mcoker/pen/ayNZrJ – Michael Coker Jul 31 '17 at 14:39
  • yes thats working fine but somehow in my project environment it does not – Marten Zander Jul 31 '17 at 14:46
  • It could be a css specificity issue. Try using `padding-left: 0 !important;` on the `ul` and see if that does it. You shouldn't use `!important` unless it's necessary, but that will tell you if it's a specificity issue. If that doesn't fix it, post enough code that you replicate the problem with the padding removed from the `ul` – Michael Coker Jul 31 '17 at 14:52
  • What is the end result you are getting? – UncaughtTypeError Jul 31 '17 at 14:59
  • @UncaughtTypeError the result looks like regular text-align: left; Changing padding on the ul doesn't have any effect check here for more authentic css and mark up that I am using: https://jsfiddle.net/gqL8rqje/ – Marten Zander Jul 31 '17 at 15:11

3 Answers3

1

I would use a flexbox with space-between

ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
}


li {
  display: inline-block;
}
<ul>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
</ul>
Gerard
  • 15,418
  • 5
  • 30
  • 52
1

Your specific problem comes from your code indentation. Indeed, the display: inline-block + text-align: justify works only if there are some separation in between elements.

In other words, the common method distribution will work for

<ul>
<li><a>some text</a></li>
<li><a>some text</a></li>
<li><a>some text</a></li>
</ul>

But it will not work for

<ul>
<li><a>some text</a></li><li><a>some text</a></li><li><a>some text</a></li>
</ul>

I don't think there is a solution for your problem with such code indentation. If you want it to work, you'll need to insert some break line between <li> tags when your page is generated.

Otherwise, the solution provided by @Gerard is the most bulletproof, even if you don't want to use flexbox, it will be the easiest way in your context.

PIIANTOM
  • 1,311
  • 11
  • 20
0

You should use text-align-last: justify; since with text-align: justify; the last line will always be left aligned, and in your case the only line IS the last line...

See your adapted fiddle here:

https://jsfiddle.net/bnwvj1q4/1/

And here your adapted snippet.

ul {
  width: 100%;
  text-align-last: justify;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
}
<ul>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
</ul>
Johannes
  • 64,305
  • 18
  • 73
  • 130
  • I use a ::after element to stretch the last line so regular text-align: justify should do the job (https://jsfiddle.net/o2ywLbjx/).. but somehow it doesnt. No matter if I do it your way or my way, at least in my project, the fiddle works tho -.- – Marten Zander Jul 31 '17 at 15:27
  • I cant replicate the issue in the fiddle... probably the problem might have something to do with some parent styles.. – Marten Zander Jul 31 '17 at 15:34
  • as `text-align-last` apparently is not supported on safari, is there an alternative that is better than this? – oldboy Aug 28 '21 at 08:24