边框太宽，因为边距 [英] Border too wide because of margin

问题描述

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

I have an inline unordered list as navigation bar in my html. I wanted a top border to show up when hovering on li element. But when I add margin or padding to make some space between consecutive elements, the border is too wide. I don't want to add spaces in html. Is there any other way? I tried putting an empty div with defined width but it didn't work. The best result I could get was with text-decoration overline, but unfortunately i need a different color than black. Here's my code:

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>

推荐答案

Padding扩展了元素的宽度，元素之前和之后的间距。您可能想要详细了解盒子模型。

Padding extends the width of your elements while margin creates empty spacing after and before the element. You may want to read more about Box Model.

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

I adjusted my code to better suit your case:

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/

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

这篇关于边框太宽，因为边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！