由于边距，边框太宽答案

【问题标题】：Border too wide because of margin由于边距，边框太宽
【发布时间】：2013-06-26 21:07:42
【问题描述】：

我的 html 中有一个内联无序列表作为导航栏。当悬停在 li 元素上时，我希望显示一个顶部边框。但是当我添加边距或填充以在连续元素之间留出一些空间时，边框太宽了。我不想在 html 中添加空格。还有其他方法吗？我尝试放置一个具有定义宽度的空 div，但它没有用。我能得到的最好结果是文字装饰覆盖，但不幸的是我需要一种不同于黑色的颜色。这是我的代码：

LI
{
display: inline;
font-family: Arial;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.2em;
padding-left: 30px;
}
LI:hover
{
border-top: 1px solid #000000;
}

和 HTML

<ul>
            <a href="#"><li>link 1</li></a>
            <a href="#"><li>link 2</li></a>
            <a href="#"><li>link 3</li></a>
            <a href="#"><li>link 4</li></a>
</ul>

【问题讨论】：

请发布您的 HTML 和 CSS。
我建议将列表中的所有元素浮动并使其显示为块。内联列表有时很难破译 - 但是，请发布您的代码。来看看吧
我添加了我的代码，也许你现在看到了一些更简单的解决方案。

标签： css navigation border

【解决方案1】：

填充扩展元素的宽度，而边距在元素前后创建空白间距。您可能想了解更多关于 Box Model 的信息。

我调整了我的代码以更好地适应您的情况：

HTML：

<ul>
    <a href="#"><li>link 1</li></a>
    <a href="#"><li>link 2</li></a>
    <a href="#"><li>link 3</li></a>
    <a href="#"><li>link 4</li></a>
</ul>

CSS：

ul a {
    text-decoration: none !important; //Removes default underline form link
}

li {
    display: inline;
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding-left: 0.2em; // Letter spacing is making borders to extend slightly more on the right. This makes borders extend similarly on the left
    padding-top: 2px; //To push top border slightly higher, so that top and bottom is the same distance from your text
    margin-left: 30px;
    text-align: center;
    border-top: 1px solid transparent; //Stops navigation from extending on :hover
}

li:hover {
    border-top: 1px solid #000; //border top on :hover
}

FiddleJS：http://jsfiddle.net/kGN69/2/

【讨论】：

非常感谢！这正是我所需要的。但只是为了更好地理解 - 为什么必须先制作透明边框？它如何影响它在 :hover 上的宽度？
它不会影响项目的宽度，但是如果您要在 :hover 状态上绘制边框，这样做是一个好习惯。如果您没有此透明边框，则浏览器在悬停时会将您的项目向下推 1 像素（边框厚度），因为它必须在给定元素上方分配额外空间。它不会影响您的代码，因为您将 display 声明为 inline 但它会在 inline-block 或 block 上，或者如果您决定在侧面添加边框。不带和带透明边框的实时示例：jsfiddle.net/kGN69/5 vs jsfiddle.net/kGN69/6

【解决方案2】：

不要使用边距，而是尝试使用 Padding。

我可以看看你的编码吗...？会容易很多。

首先，您确定要编辑 li hover 吗？

例子：

#yourdiv li a:hover{
.....
}

如果是，请尝试更改此设置。

例子：

#yourdiv{
...
padding-top:5px;
padding-bottom:5px;
padding-right:5px;
padding-left:5px;
}

【讨论】：