CODEWITHSUNDEEP
htmlcsstext-aligntext-justify
Marten Zander
Marten Zander

Reputation: 2565

justifying inline-block elements using "text-align: justify" not working

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/

Upvotes: 1

Views: 5328

Answers (3)

PIIANTOM
PIIANTOM

Reputation: 1401

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.

Upvotes: 1

Johannes
Johannes

Reputation: 67799

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>

Upvotes: 0

Gerard
Gerard

Reputation: 15796

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>

Upvotes: 1

Related Questions