Question

我正在开发一个新主页，试图尽可能避免图像，我对导航栏上的边框有轻微问题。我真的无法想到一种方法，可以通过填充将边框的边连接起来。目前双方都没有接触，所以看起来并不是连续的。我可能会遗漏一些明显的东西，但我想不出一种方法来满足它们。有人有什么想法吗？

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

这是一个小提琴，供你检查：

Answer 1

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

CSS：

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

Answer 2

你可能想在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>

Answer 3

如果只是在菜单中的border-right元素上使用li，那么您可以采取的措施就是使用{{1}}。

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

如果您正在寻找，请告诉我。