CSS 使底部边框更接近文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10131713/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make Bottom Border Closer To Text
提问by Michael
I want to underline my navigation menu but the problem is that I need it to be thicker so I am using bottom border instead so that I can set the width to 6px.
我想在我的导航菜单下划线，但问题是我需要它更厚，所以我使用底部边框，以便我可以将宽度设置为 6px。
I can seem to figure out how to get the border to appear closer to the text. There seems to about a 10px gap between the text and the bottom-border at the moment and I don't want to have any.
我似乎可以弄清楚如何让边框看起来更接近文本。目前文本和下边框之间似乎有大约 10px 的差距，我不想有任何差距。
I have tried to position another div and position it relative to each {li} with {bottom: 10px} but I can't seem to get it to work.
我试图定位另一个 div 并将它相对于每个 {li} 与 {bottom: 10px} 定位，但我似乎无法让它工作。
Here's what I have so
这就是我所拥有的
CODE
代码
<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
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{
}
采纳答案by Andres Ilich
You can use a mixture of line-heightand marginto garner such an effect, like so:
您可以使用的混合物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;
}
回答by Jens Draser-Schieb
Using display: inline-block;in combination with border-bottomcould cause some weird behavior line breaks if longer links contain a line-break, see http://jsfiddle.net/PQZ9H/. Alternatively, you could use a combination of background-imageand background-positionwhich has the advantage of not touching the display value.
使用display: inline-block;结合border-bottom可能会导致一些奇怪的行为，换行，如果再链接包含断行，见http://jsfiddle.net/PQZ9H/。或者，你可以使用的组合background-image，并background-position具有不接触显示值的优势。
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; }
A disadvantage is that you might have to define a background-position for every font-size you use.
一个缺点是您可能必须为您使用的每个字体大小定义一个背景位置。
Using this technique you could also remove the border from descenders like g or y adding
使用这种技术，您还可以从下降器中删除边框，例如添加 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; }
and
和
<a href="javascript:void(0)"><span class="descender">A link with descenders like g or y</span></a>
回答by Alex Baumgertner
Try to this(origin russian http://artgorbunov.ru/bb/soviet/20120510/) article methods (background gradient and http://jsfiddle.net/d3WG6/)
尝试这个（起源俄语http://artgorbunov.ru/bb/soviet/20120510/）文章方法（背景渐变和http://jsfiddle.net/d3WG6/）
<p>Зигварт считал <a><span>критерием истинности необходимость и общезначимость, для которых нет никакой опоры</span></a> в объективном мире.</p>
a { font-size: 50%; border-bottom: 1px dashed red; }
a > span { font-size: 200%; line-height: normal; }
回答by Carlos Rafael
Margin property can't change the border-bottom position, so
边距属性不能改变边框底部的位置，所以
The heightof the <a>element will define the position of the your border-bottom.
高度的的<a>元素将定义你的下边框的位置。
#menu > ul > li > a {
height: ;
}
回答by Angelique Wu
had a similar issue to the original question. Its been answered here: https://stackoverflow.com/questions/18180490/move-border-bottom-closer-to-text
有一个与原始问题类似的问题。它在这里得到了回答：https: //stackoverflow.com/questions/18180490/move-border-bottom-closer-to-text
The solution above might help others who couldn't get the solution to this question working for them.
上面的解决方案可能会帮助那些无法解决这个问题的人。
回答by Greg B
Try adding this:
尝试添加这个：
padding-bottom: 5px;
to
到
#menu ul li a{
