Justified menu items

by infous

HTML

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li class="helper"></li>
</ul>

CSS

ul {
        font: 14px Verdana, Geneva, sans-serif;
        text-align: justify;

        /* Обнуляем для родителя*/
        line-height: 0;
        font-size: 1px; /* 1px для Opera */

        /* Лекарство для IE6-7*/
        text-justify: newspaper;
}

        ul li  {
    position: relative;
                background: #E76D13;
                display: inline-block;
                text-align: left;
                border: 1px solid #000;
padding: 10px;  
margin-left: 10px;    

                /* Востанавливаем у потомков, кроме последнего*/
                line-height: normal;
                font-size: 14px;

                /* Без него в Opera будет отступ под элементами */
                vertical-align: top;

                /* эмуляция inline-block для IE6-7*/
                //display : inline;
                //zoom : 1;
        }
li:before {
    content: ' ';
    position: absolute;
    height: 30px;
    width: 1px;
    background: green;
    top: 0; 
    left: 0;
}
        ul li.helper {
                width: 100%;
                height: 0px;
                visibility: hidden;
                overflow: hidden;
        }