<ul class="columns">
    <li>Column 1</li>
    <li>Column 2</li>
    <li>Column 3</li>
    <li>Column 4</li>
</ul>

.columns {
    margin:0;
    padding:0;
}
.columns li {
    display:inline-block;
    width:25%;;
}

Для такой конструкции элементы списка должны стать в четыре колонки, но последний <li> не влазит, хотя у всех ширина по 25%. Решение данной проблемы заключается в следующем...

Решение:

Добавляем следующие строки, чтобы получилось:

.columns {
   margin:0;
   padding:0;
   letter-spacing: -1px;
   line-height: 0;
   font-size: 0;
} /* обнулили отступы */

.columns li {
    display:inline-block;
    width:25%;
    letter-spacing: 0;
    line-height: 18px;
    font-size: 14px;
} /* обнулили обнуление внутри li */
 

Добавить комментарий


Защитный код
Обновить