Question

我的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>

Answer 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/

Answer 2

不要使用保证金，而是尝试使用Padding。

我能看到你的编码......？这会容易得多。

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

示例：

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

如果您愿意，请尝试更改此内容。

示例：

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

由于保证金边界太宽

2 个答案: