0

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

2 回答 2

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/

于 2013-06-26T22:51:54.683 回答
0

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

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

首先，你确定你正在编辑 li hover 吗？

例子：

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

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

例子：

#yourdiv{
...
padding-top:5px;
padding-bottom:5px;
padding-right:5px;
padding-left:5px;
}
于 2013-06-26T21:47:16.240 回答