Question

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

谢谢你， -Kyle

这是一个例子： 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，然后用overflow: hidden剪掉边框。见http://jsfiddle.net/3DU6d/

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

1 个答案: