使底部边框靠近文本

Question

我想要给我的导航菜单加下划线，但问题是我需要它更粗，所以我使用底部边框，这样我就可以将宽度设置为6像素。

我无法解决如何让边框靠近文本的问题。目前似乎在文本和底部边框之间有大约10像素的间隙，而我不想有任何间隙。

我尝试使用另一个div并将其相对于每个li定位，使用{bottom: 10px}，但我似乎无法使其起作用。

这是我的代码

    <div id="menu">
    <ul>
        <li><a href="#home">home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</div>

CSS

#menu {
position: fixed;
left: 25%;
clear: both;
float: left;
font-size: 80px;
z-index: 500;
filter: alpha(opacity=75);
opacity: .75;
}

#menu ul{
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
line-height: 90px;
}

#menu ul li{
text-decoration: none;
list-style-type: none;
margin: 0;
}

#menu ul li a{
border-bottom: 6px solid #000;
text-decoration: none;
list-style-type: none;
color: #000;
}

#menu ul li a:hover{
}

- Michael

Answer 1

您可以使用line-height和margin的组合来实现这样的效果，如下所示：

#menu ul li a {
    border-bottom: 6px solid #000000;
    color: #000000;
    display: block;
    line-height: 50px;
    list-style-type: none;
    margin: 20px 0;
    text-decoration: none;
}

- Andres Ilich

Answer 2

在使用display: inline-block;和border-bottom组合时，如果较长的链接包含换行符，则可能会导致一些奇怪的行为和换行，参见http://jsfiddle.net/PQZ9H/。另一种选择是使用background-image和background-position的组合，这样可以避免影响display属性。

a {
    text-decoration: none;
    position: relative;
    background-repeat: repeat-x;
    background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==);
    background-position: left 15px;
}
a:hover { background: none; }

缺点是你可能需要为每个使用的字体大小定义一个背景位置。

使用这种技术，您还可以从下降字符（如g或y）中删除边框，添加

a span.descender { text-shadow: -1px 0px 0px white, 1px 0px 0px white, -2px 0px 0px white, 2px 0px 0px white, -3px 0px 0px white, 3px 0px 0px white; }

并且

<a href="javascript:void(0)"><span class="descender">A link with descenders like g or y</span></a>

请查看http://jsfiddle.net/25XNY/1。该链接与it技术有关。

- Jens Draser-Schieb

---

我发现在所有不同的选项中，使用背景图片是最好的选择。此外，使用 em 单位而不是像素，您就不必担心字体大小的问题。例如 background-position: 0 1.05em;。 - tomyates

如果我们需要不同的颜色，请前往PNG Pixel - TRANSPARENT BASE64 PNG PIXEL GENERATOR。 - Bruce Sun

Answer 3

尝试查看这篇文章的方法（原文俄语，链接1: this，链接2: http://artgorbunov.ru/bb/soviet/20120510/），其中包括背景渐变和http://jsfiddle.net/d3WG6/。

<p>Зигварт считал <a><span>критерием истинности необходимость и&nbsp;общезначимость, для&nbsp;которых нет никакой опоры</span></a> в&nbsp;объективном мире.</p>

a { font-size: 50%; border-bottom: 1px dashed red; }
a > span { font-size: 200%; line-height: normal; }

- Alex Baumgertner

Answer 4

Margin属性无法改变border-bottom的位置，因此

<a>元素的高度将定义您的border-bottom的位置。

 #menu > ul > li > a {
      height: ;
 }

- Carlos Rafael

---

这对我来说是最简单的解决方案。 - Macumbaomuerte

在这种情况下，line-height 的效果更好。 - nicbou