<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 */