Выравнивание блоков по ширине

Выравнивание блоков по ширине

by selahssea

HTML

<h1><span>Firefox 8, Opera 11.51, IE6-9, Safari 5.1, Chrome</span></h1>
    <div class="test-box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

CSS

/* Общие стили - Для оформления */
    body { min-width: 600px; margin: 0 10px; font: 0.8125em/1 Verdana,sans-serif; background: #fff; }
    h1 {
        font: 1.8em Georgia,Times,serif;
        margin-bottom: 0.5em;
        color: #E76D13;
        text-align: center;
    }
    h1 span { color: #000;}
    .test-box {
        background: #F8F7EF; 
        border: 1px dashed #000;
        border-bottom: 1px dashed #000;
        
        margin: 10px auto 10px;
        padding: 10px 0;
        
    }
        .test-box ul {        
            margin: 0;
            padding: 0;
            list-style: none;
            
            
        
        }
    .test-width { 
        background: #E4C17D; 
         
        margin-top: 10px;
        text-align: center;
        padding: 5px 0;
        margin: 10px auto 10px;
    }
    
    
    
    /* CSS для примера */
    ul {
        font: 14px Verdana, Geneva, sans-serif;
        text-align: justify;
        
        /* Обнуляем для родителя*/
        line-height: 0;
        font-size: 1px; /* 1px для Opera */
        
        /* Лекарство для IE6-7*/        
        text-justify: newspaper;
        zoom:1;
        
        /* Включаем в работу последнюю строку*/        
        text-align-last: justify;    
    }
    ul:after {
            width: 100%; 
            height: 0px;
            visibility: hidden;
            overflow: hidden;
            content: '';
            display: inline-block;

    }
        ul li  {
            background: #E76D13;
            width: 20%;
            height: 98px;
            display: inline-block;
            text-align: left;
            border: 0 solid #000;
            
            /* Востанавливаем у потомков, кроме последнего*/
            line-height: normal;
            font-size: 14px;
            
            /* Без него в Opera будет отступ под элементами */
            vertical-align: top; 
            
            /* эмуляция inline-block для IE6-7*/
           ...