— Привет, меня зовут Максим Покровский. Вы находитесь в моем рабочем кабинете. Поскольку я фрилансер, будем считать, что именно так он и выглядит. Здесь я пишу много интересных вещей, и если вы почувствовали, что я именно тот человек, который вам нужен, то я всегда открыт для контакта.
Сделал за последнее время:
| Заказать мне работу |
| 03.09 | Убираем отступ у последнего элемента списка. |
Возьмем обычное стандартное горизонтальное меню, между которыми будут отступы в 10px. Как правило, последний элемент списка прижимается к внутреннему краю либо окна, либо контейнера (в моем примере я, для наглядности, сделал контейнер) и вот тут частенько возникает загвоздка….
Итак, у нас есть схематичный макет того, что нам нужно разверстать и задача сделать это максимально грамотно.
<div>
<ul>
<li>1.</li>
<li>2.</li>
<li>3.</li>
</ul>
</div>
*{
margin:0;
padding:0;
}
div{
width:506px;
border:solid 1px red;
padding:10px 0 10px 50px;
height:50px;
}
ul{
list-style:none;
height:50px;
}
ul li{
float:left;
width:150px;
height:20px;
background:#eee;
border:solid 1px #777;
padding:0 0 0 10px;
margin:0 10px 10px 0;
font:normal 12px/20px Tahoma;
}
Если вы вставите данный код, то обнаружите, что последний элемент переносится на другую строчку. Почему?
Все потому, что у последнего элемента тоже стоит margin-right:10px;
Первое что приходит на ум, это задать последнему li отдельный класс и прописать в нем
Это не самое удачное решение!
Во-первых, это некрасиво (да, я эстет 
). Код должен быть максимально чистым (здесь я немного написал про это) и легко читаемым. А еще я очень не люблю (и знаю кучу солидарного со мной народу) пихать классы чуть ли не вовсе элементы (сия болезнь называется «классицизм»).
Во-вторых, и это основной довод, при интеграции верстки в CMS, с 90% вероятностью возникнет проблема с этим классом. Ведь в более-менее нормальных CMS меню генериться автоматом. То есть, имеется массив разделов, и циклом из него извлекаются их названия (есть и другие способы). В этом случае, придется писать дополнительную проверку на идентификацию последнего элемента. Оно кому-нибудь надо?
Я в этой ситуации поступаю так:
*{
margin:0;
padding:0;
}
div{
width:506px;
border:solid 1px red;
padding:10px 0 10px 50px;
height:50px;
overflow:hidden; /*это нужно чтобы наш макет не разъехался*/
}
ul{
list-style:none;
margin:0 -10px 0 0; /* собственно лекарство */
height:50px;
}
ul li{
float:left;
width:150px;
height:20px;
background:#eee;
border:solid 1px #777;
padding:0 0 0 10px;
margin:0 10px 10px 0;
font:normal 12px/20px Tahoma;
}
Просто. Безупречно. Почти.
IE немного смазывает картину. Нужно чтобы ul облегал элементы «зафлоаченные» элементы списка. Здесь лекарства два – либо указываем ему float, либо жестко пишем height. (хитрость с height:1%; тут не катит).
В остальном я весьма доволен методом. Чуть не забыл, данный способ годиться и для вертикальных меню. Тут даже IE не капризничает.
Комментарии