2

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

我已经尝试了水平 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; }

任何帮助将不胜感激。

4

4 回答 4

2

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

#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>. 我还#container > header >从你的 CSS 中删除了它，因为它是多余的 CSS。请参阅此处的工作示例：http: //jsfiddle.net/QhCeH/

于 2013-09-18T23:19:08.410 回答
1

我最喜欢的实现这一点的方法，也是我认为最简单的方法，就是为你的<li>元素设置边框。A 做了一个简单的、断断续续的 JSfiddle 作为例子。

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

例子：

.first {
    border-left: 1px solid #hexhex
    height: set the height;
于 2013-09-18T23:29:16.180 回答
0

这样的事情怎么样？

#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>
于 2013-09-18T23:21:55.200 回答
0

已#container > header > #topbar > nav > ul > li > a添加border-right: 1px solid #333; padding: 0 10px 0 10px;

这是一个小提琴

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

这是一个小提琴

于 2013-09-18T23:31:38.797 回答