Power By 专否社区

Full-justify for li elements

Go To StackoverFlow.com

8

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?

2012-04-04 22:16
by Brad Herman
Surely that's exactly what your example CSS does - Niet the Dark Absol 2012-04-04 22:18
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 2012-04-04 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 2012-04-04 22:24
@Dan -- I think you just solved my problem :) -- first child, last child should do the tric - Brad Herman 2012-04-04 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 2012-04-04 22:33
Possible duplicate of How do I justify a horizontal list?TylerH 2016-06-21 19:23

17

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.

2012-04-04 23:17
by NGLN

1

IMHO, the best way is use CSS3 Flexboxes:

.menu {
    display: flex;
    justify-content: space-around;
}
2016-10-11 21:30
by VeroLom
Very cool! I'm finding here however that space-between more exactly answers the question - Mike O'Connor 2017-11-14 12:18

0

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;
}​
2012-04-04 22:57
by rmagnum2002

0

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/

2012-04-05 06:19
by Rohit Azad
Ads