Разделители в горизонтальном списке навигации

Моя задача - ввести несколько горизонтальных полос между ссылками в простой несортированный навигационный список для веб-сайта моей компании.

Я пробовал каждый метод, указанный в вертикальных разделителях в горизонтальном меню UL, чтобы безрезультатно. Одна из ссылок в этой беседе привела меня к http://www.jackreichert.com/2011/07/31/how-to-add-a-divider-between-menu-items-in-css-using-only-one-selector/, который сработал! ... вроде.

http://s21.postimg.org/nno183jl3/problems.jpg

Вот что я получаю прямо сейчас: разделители переместились в левую часть навигационного списка. На данный момент я немного озадачен, поэтому я надеялся, что вы, ребята, можете мне помочь.

Вот HTML. "cart_count.tpl" - это содержимое корзины покупок справа.

<div style=float:right id="topbar">
 <nav>
  <div id="thisisthecartfunction" style=float:right>
   {include file="cart_count.tpl"}</div>
  <ul style=float:right>
   <li><a href="/member">My Account</a></li>
   <li><a href="/member_wishlist">Wish List</a></li>
   <li><a href="/tracking">Order Status</a></li>
   <li><a href="/category/customer-service">Customer Service</a></li>
  </ul> 
 </nav>
</div>

А вот и CSS. Я знаю, что это длинновато и загромождено.

#container > header > #topbar { width: 100%; background: #f8f8f8; margin: 0 auto;}
#container > header > #topbar > nav { width: 980px; overflow: hidden; margin: 0px auto;}
#container > header > #topbar > nav > div > #cartitems {vertical-align: bottom; margin: 3px 0px 10px 10px; }
#container > header > #topbar > nav > ul {list-style-type: none; margin: 0; padding: 0;}
#container > header > #topbar > nav > ul > li {display: inline;list-style-type: none;}
#container > header > #topbar > nav > ul > li+li { border-left: 1px solid #000000 }
#container > header > #topbar > nav > ul > li > a {display: inline; float: right; background: #f8f8f8; color: #666666; text-decoration: none; vertical-align: bottom; margin: 5px 0px 10px 10px; }
#container > header > #topbar > nav > ul > li > a:hover { text-decoration: underline; }

Любая помощь будет принята с благодарностью.


list html css divider
person user2793400    schedule 18.09.2013    source источник
comment
Прежде всего измените style=float:right на style="float:right;"   -  person mdesdev    schedule 19.09.2013

Ответы (4)


arrow_upward
2
arrow_downward

Хорошим направлением было бы использовать отдельный элемент списка в качестве заполнителя для каждого разделителя, например:

#topbar { width: 100%; background: #f8f8f8; margin: 0 auto;}
#topbar > nav { width: 980px; overflow: hidden; margin: 0px auto;}
#topbar > nav > ul {list-style-type: none; margin: 0; padding: 0;float:left;}
#topbar > nav > ul > li {display: inline;list-style-type: none;}
#topbar > nav > ul > li > a:hover { text-decoration: underline; }

<div id="topbar">
 <nav>
  <ul>
   <li><a href="/member">My Account</a></li>
   <li class="divider">|</li>
   <li><a href="/member_wishlist">Wish List</a></li>
   <li class="divider">|</li>
   <li><a href="/tracking">Order Status</a></li>
    <li class="divider">|</li>
   <li><a href="/category/customer-service">Customer Service</a></li>
  </ul> 
 </nav>
</div>

Таким образом, вы можете очистить текущий CSS и получить детальный контроль над разделителем, будь то изображение или текст. Также обратите внимание, что я удалил поплавок из <div id="topBar"> и <ul>. Вам нужен только float в вашем CSS для <ul>. Я также удалил #container > header > из вашего CSS, поскольку это лишний CSS. См. Рабочий пример здесь: http://jsfiddle.net/QhCeH/

person Brian Ogden    schedule 18.09.2013
comment
Этот метод действительно работал лучше всего. После небольшого редактирования и очистки маленькие линии идеально расположены и выглядят хорошо. Большое спасибо! - person user2793400; 19.09.2013

arrow_upward
1
arrow_downward

Мой любимый способ добиться этого, и к тому же, на мой взгляд, самый простой, - это установить border-right для ваших <li> элементов. В качестве примера А сделал простой, изменчивый JSfiddle.

Как видите, ничего красивого в этом нет, но идею вы поняли. Это также позволяет избежать использования элемента HTML <nav>, который, на мой взгляд, обычно бесполезен, и я обнаружил, что вы можете добиться гораздо большей точности в дизайне, используя неупорядоченные списки. В этом случае вы даже можете добавить класс first, чтобы у вас также была граница в начале первого элемента.

Пример:

.first {
    border-left: 1px solid #hexhex
    height: set the height;
person samrap    schedule 18.09.2013
comment
Я не могу сказать, что согласен с вашим комментарием относительно элемента nav. Используя свою скрипку в качестве примера, было бы более семантически правильно использовать <nav> вместо <div id="nav"> - person Jon P; 19.09.2013

arrow_upward
0
arrow_downward

Как насчет чего-то вроде этого?

#thisisthecartfunction {
    width: 200px
}

li {
    display: inline-block;
    width: 120px;
    height: 40px;
    margin-left: 20px;
}

li:not(:first-of-type) {
    margin-left: 20px;
}

li:not(:last-of-type) {
    border-right: 1px solid black;
}

<div style="float:right" id="topbar">
 <nav>
  <ul style="float:right">
   <li><a href="/member">My Account</a></li>
   <li><a href="/member_wishlist">Wish List</a></li>
   <li><a href="/tracking">Order Status</a></li>
   <li><a href="/category/customer-service">Customer Service</a></li>
  </ul> 
 </nav>
</div>
person chopper    schedule 18.09.2013

arrow_upward
0
arrow_downward

На #container > header > #topbar > nav > ul > li > a добавлено border-right: 1px solid #333; padding: 0 10px 0 10px;

Вот Fiddle

#container > header > #topbar > nav > ul > li > a { display: inline; float: right; border-right: 1px solid #333; background: #f8f8f8; color: #666666; text-decoration: none; vertical-align: bottom; padding: 0 10px 0 10px; margin: 5px 0px 10px 0; }

#container > header > #topbar > nav > ul > li:last-child a { border-left: 1px solid #333; }

и поскольку ваш <ul> имеет float: right;, я добавил border-left: 1px solid #333; к последнему дочернему элементу, который в данном случае является первым элементом.

или, может быть, вам нужны разделители в полную высоту

#container > header > #topbar > nav > ul > li {display: block; float: right; border-right: 1px solid #333; list-style: none;}
#container > header > #topbar > nav > ul > li:last-child { border-left: 1px solid #333; }

Вот Fiddle

person mdesdev    schedule 18.09.2013