javascript - 如果链接扩展到新行，则在链接上禁用 border-left

Question

我对子导航栏中链接之间的管道分隔符有疑问。我的链接有一个像素的左边框(管道分隔符)，第一个链接禁用左边框。我的问题是，当链接扩展到它们的容器并扩展到新行时，新行上的第一个链接将有一个像素的左边框。所以，我的问题是，如果链接是新行的第一个元素，我该如何禁用 border-left？请记住，我的子导航中的链接数量和链接名称会根据用户当前所在的页面而变化。所以，“nth-child()”选择器似乎是不可能的。我正在考虑使用 JQuery .offset() 方法......但这似乎不是正确的方法。任何帮助或建议都会很棒。

谢谢你， -凯尔

举个例子: Demo

<div class="container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
    <a href="#">Link 6</a>
    <a href="#">Link 7</a>
    <a href="#">Link 8</a>
    <a href="#">Link 9</a>
    <a href="#">Link 10</a>
</div>

.container {
    width: 300px;
}

.container a {
    color: #999;
    text-decoration: none;
    margin: 10px 0 0 0;
    padding: 0px 10px;
    border-left: 1px solid;
    float: left;
}

.container a:first-child {
    border-left: none;
    padding: 0 10px 0 0;
}

Answer 1

你可以让每个链接都有一个左边框(所以只需删除第一个链接的代码)，使用 margin-left: -1px 将它们向左移动 1px 并用溢出:隐藏。参见 http://jsfiddle.net/3DU6d/