水平导航列表上的分隔线

Question

我的任务是在我公司网站的一个简单、未排序的导航列表中的链接之间输入一些水平条。

我已经尝试了Vertical dividers on horizontal UL menu 中列出的每种方法，但无济于事。该线程中的一个链接将我带到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; }

任何帮助将不胜感激。

Answer 1

一个好的方向是使用单独的列表项作为每个分隔符的占位符，如下所示：

#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> 中删除了浮动。您只需要在 CSS 中为 <ul> 设置一个浮点数。我还从您的 CSS 中删除了 #container > header >，因为它是多余的 CSS。在此处查看工作示例：http://jsfiddle.net/QhCeH/

Answer 2

我最喜欢的实现这一点的方法，也是我认为最简单的方法，是将边框设置为您的 <li> 元素。 A 做了一个简单的、波涛汹涌的 JSfiddle as an example.

如您所见，这没什么漂亮的，但您明白了。这也避免了使用 HTML <nav> 元素，我认为这通常是无用的，我发现使用无序列表可以在设计中实现更高的精度。在这种情况下，您甚至可以添加一个 first 类，这样您也可以在第一个元素的开头有一个边框。

例子：

.first {
    border-left: 1px solid #hexhex
    height: set the height;

Answer 3

this 这样的东西怎么样？

#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>

Answer 4

在#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