css - 导航栏边框问题

Question

我正在开发一个新主页，尽量避免使用图像，并且导航栏上的边框有一点问题。我真的想不出一种方法来让边界的两侧通过填充相互链接。目前双方没有接触，所以它看起来不连续。我可能遗漏了一些明显的东西，但我想不出办法来认识他们。有人有想法么？

我能想到解决这个问题的唯一方法是在每个 li 元素上使用类，但我想知道是否有可选的方法。

这是一个小提琴供您检查：

score 1 · Accepted Answer

您可能想在 li 样式中使用以下内容？虽然进行了调整；未在所有浏览器中测试。

li{
    display: inline;
    margin-right: -5px; /*Add this*/
    padding: 11px 12px 11px 12px;
    border: solid 1px #c1c1c1;
}

选项2：-

一个更优雅的解决方案就在 SO。

为此，您可能必须更改您的 html。

<ul>
    <li>Test</li><li>Apple</li><li>Cat</li><li>Dog</li>
</ul>

score 1 · Accepted Answer

试试这个jsFiddle 示例。我将列表项向左浮动，而不是内联显示它们。这消除了它们之间的差距。然后我将列表本身相对定位并稍微向上移动。

CSS：

ul{
    float: right;
    position:relative;
    top:-14px;
}
li{
    float:left;
    padding: 11px 12px 11px 12px;
    border: solid 1px #c1c1c1;
}

score 0 · Accepted Answer

要使这种感觉更加连续，您可以做的就是仅在菜单中border-right的元素上使用。li

我已经更新了你的小提琴。

让我知道这是否是您想要的。

3 回答 3