html - 水平导航列表上的分隔线

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"> 中删除了 float 。和<ul> 。您只需要在 CSS 中使用 <ul> 的 float 。 。我还删除了 #container > header >从你的 CSS 中删除，因为它是多余的 CSS。请参阅此处的工作示例:http://jsfiddle.net/QhCeH/