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>移除了浮动广告。您只需要在<ul>的CSS中使用浮点数。我还从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

水平导航列表上的分隔线

4 个答案: