Вертикальные рассекатели на горизонтальном меню UL
Я пытаюсь создать горизонтальную панель навигации (без выпадающего списка, просто горизонтальный список), но у меня возникли проблемы с поиском лучшего способа добавления вертикальных разделителей между пунктами меню.
фактический HTML выглядит следующим образом:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
текущий CSS выглядит следующим образом:
.menu li {
display: inline;
margin-left: 25px;
padding-left: 25px;
}
между каждым пунктом меню я хочу небольшое изображение в качестве вертикального разделителя, за исключением того, что я не хочу, чтобы разделитель отображался перед первым пунктом, и я не хочу, чтобы разделитель отображался после второй пункт.
конечный результат должен выглядеть примерно так:
Пункт 1 / Пункт 2 | Пункт 3 | Пункт 4 / Пункт 5
просто замена трубы на фактическое изображение.
Я пробовал разные способы-я пробовал установить list-style-image
свойство, но изображение не появилось. Я также попытался установить разделитель в качестве фона, который на самом деле более или менее работал, за исключением того, что он сделал первый элемент с разделителем перед он.
8 ответов
довольно и просто без каких-либо"необходимости указывать первый элемент". CSS более мощный, чем большинство думают (например,first-child:before
это здорово!). Но это, безусловно, самый чистый и самый правильный способ сделать это, по крайней мере на мой взгляд.
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li:not(:first-child):before {
content: " | ";
}
Теперь просто используйте простой неупорядоченный список в HTML, и он заполнит его для вас. HTML должен выглядеть так:
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Support</a></li>
</ul>
</div><!-- navigation -->
результат будет таким:
ГЛАВНАЯ | О НАС | Поддержка
Теперь вы можете бесконечно расширяться и никогда не беспокоиться о порядке, изменении ссылок или вашей первой записи. Все автоматизировано и отлично работает!
попробуйте это, искатель:
li+li { border-left: 1px solid #000000 }
это повлияет только на вспомогательные элементы li
нашел здесь
Это также можно сделать с помощью CSS: псевдоклассов. Поддержка не так широка, и ответ выше дает вам тот же результат, но это чистый CSS-y =)
.ULHMenu li { border-left: solid 2px black; }
.ULHMenu li:first-child { border: 0px; }
или:
.ULHMenu li { border-right: solid 2px black; }
.ULHMenu li:last-child { border: 0px; }
см.:http://www.quirksmode.org/css/firstchild.html
Или: http://www.w3schools.com/cssref/sel_firstchild.asp
Я думаю, что лучший снимок-это border-left
свойство, которое назначается каждому из li
s, кроме первого (вы должны были бы дать первому класс с именем first
и явно удалите границу для этого).
даже если вы создаете <li>
программно, присвоив first
класс должен быть легким.
более простым решением было бы просто добавить #navigation ul li~li { border-left: 1px solid #857D7A; }
это отлично работает для меня:
NB я использую BEM / OCSS синтаксис SCSS
#navigation{
li{
&:after{
content: '|'; // use content for box-sizing
text-indent: -999999px; // Hide the content
display: block;
float: right; // Position
width: 1px;
height: 100%; // The 100% of parent (li)
background: black; // The color
margin: {
left: 5px;
right: 5px;
}
}
&:last-child{
&:after{
content: none;
}
}
}
}
Я делаю это, как говорит Пекка. Поместите встроенный стиль на каждый <li>
:
style="border-right: solid 1px #555; border-left: solid 1px #111;"
взлетайте первым и последним по мере необходимости.