Full-justify for li elements

Question

We have an adaptive layout where some list elements are displayed horizontally:

| Li1 | Li2 | Li 3 | Li4 |

Obviously I can just set

ul {width:100%}
ul li {width:25%}

To have the li's change size as the browser changes size. However, we want the left edge of the left-most li to align to the left edge with the right-most li right edge aligning to the right edge even as the browser expands.

Li1    Li2    Li3     Li4
|                       |

Li1      Li2      Li3       Li4
|                             |

Li1  Li2  Li3   Li4
|                 |

Is there a way to do this with pure css?

just to be clear - are you talking about text-align? i.e. you want the left most li element to have left text-align, and the right most to have right text-align, and perhaps ... the middle ones to have center text-align? — Dan, Apr 04 '12 at 22:23
Not quite... with the example css, the text within the li is either left, right, or center justified, so there is no guarantee that the text will line up properly, only that the boxes of the li elements line up to the edges. — Brad Herman, Apr 04 '12 at 22:24
@Dan -- I think you just solved my problem :) -- first child, last child should do the trick — Brad Herman, Apr 04 '12 at 22:24
However, with this solution, you get very uneven margins between the actual text within the li if the text isn't the same width. — Brad Herman, Apr 04 '12 at 22:33

score 17 · Accepted Answer · edited May 23 '17 at 12:18

Use this solution (or this one). Translating that answer to a list results in:

Markup:

<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>

Style sheet:

ul {text-align: justify}
ul::after {width: 100%; display: inline-block; content: "."; visibility: hidden}
li {display: inline-block}

This is an IE7+ solution. For IE7 you need an extra element adjacent to the list items.

score 4 · Answer 2 · answered Oct 11 '16 at 21:30

4

IMHO, the best way is use CSS3 Flexboxes:

.menu {
    display: flex;
    justify-content: space-around;
}

answered Oct 11 '16 at 21:30

VeroLom

3,856
9
34
48

Very cool! I'm finding [here](https://www.w3schools.com/csSref/playit.asp?filename=playcss_justify-content&preval=flex-end) however that `space-between` more exactly answers the question. – Mike O'Connor Nov 14 '17 at 12:18

score 0 · Answer 3 · answered Apr 04 '12 at 22:57

http://jsfiddle.net/yUgYW/3/

this is what I get this far.. could be a start for you

HTML

<div id="container">
<ul>
    <li class="fisrt">1</li>
</ul>
<ul class="center">
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ul>
    <li class="last">5</li>
</ul>
</div>

CSS

#container
{
}

li
{float:left;
border:1px solid red;
width:120px;}
.fisrt
{
  float:left;
}
.last
{
  float:right;
}
.center
{
  width:400px;
  margin:auto;
}

score 0 · Answer 4 · answered Apr 05 '12 at 06:19

Hi you define text align justify in you li as like this

css

ul {width:100%}


ul li {width:25%;
    list-style:none;
    display:inline-block;
    text-align:justify;
    margin:2px;
    background:yellow;
    word-wrap: break-word;

}

HTML

<ul>
    <li>Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere </li>
    <li>Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere </li>  <li>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</li>    
</ul>

Live demo here http://jsfiddle.net/rohitazad/8UakC/8/

Full-justify for li elements

4 Answers4

Linked