Full-justify for li elements [duplicate]

Answer 1

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;
}​

Answer 2

IMHO, the best way is use CSS3 Flexboxes:

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

Answer 3

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.

Answer 4

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/