Настройка Меню Liftweb
Я хочу создать меню, которое похоже:
РАЗМЕСТИТЕ | НЕЧТО | ПАНЕЛЬ | О | КОНТАКТ
Как я мог бы пойти о выполнении этого?
Вот то, что я попробовал:
и
ul.menu li {
display: inline;
list-style-type: none;
text-transform: uppercase;
border-right: 1px solid white;
padding-right: 5px;
}
li.current span {
background: white;
color: black;
padding: 5px 5px 3px 5px;
font-size: 11px;
}
li.current a, a:visited, a:link {
color: white;
padding: 5px 5px 3px 5px;
font-size: 11px;
}
Это рядом, но это не выглядит совершенно правильным. Также Вы заканчиваете с дополнительной строкой в конце. Я хочу, чтобы строки были той же высотой как текст.
http://lh5.ggpht.com/_5DxlOp9F12k/S2aFQHfupzI/AAAAAAAAJiY/Ds0IpEyu78I/s800/menu.png
2 ответа
Вы можете попробовать сделать так, чтобы элементы имели inline-block display.
ul.menu li {
display: inline-block;
*display: inline; zoom: 1; /* inline-block under IE */
vertical-align: middle;
}
Таким образом, они будут вести себя гораздо более похоже на блочные элементы и смогут синхронизироваться со ссылками. Также вы можете попробовать поиграть со свойством line-height вместо добавления вертикальной прокладки, так как line-height будет более точно центрировать текст по вертикали.
Чтобы избавиться от последней строки, вы можете использовать псевдокласс: last-child:
ul.menu li:last-child {
border: none;
}