使底部边框更接近文本

Posted 2023-03-06

【中文标题】使底部边框更接近文本

【英文标题】：Make Bottom Border Closer To Text

【发布时间】：2012-04-25 06:42:24

【问题描述】：

我想在我的导航菜单下划线，但问题是我需要它更厚，所以我使用底部边框，以便我可以将宽度设置为 6px。

我似乎可以弄清楚如何让边框看起来更接近文本。目前，文本和底部边框之间似乎有大约 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

【参考方案1】：

Margin 属性不能改变边框底部位置，所以

<a> 元素的高度将定义边框底部的位置。

 #menu > ul > li > a 
      height: ;
 

【参考方案2】：

如果较长的链接包含换行符，将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; 

一个缺点是您可能必须为您使用的每个字体大小定义一个背景位置。

使用此技术，您还可以从下行删除边框，例如 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

【讨论】：

我发现在所有不同的选项中，使用背景图像是迄今为止最好的。此外，通过使用 em 单位而不是像素，您不必担心字体大小。例如background-position: 0 1.05em;

如果我们需要不同的颜色，请转至PNG Pixel - TRANSPARENT BASE64 PNG PIXEL GENERATOR。

【参考方案3】：

与原始问题有类似的问题。 它在这里得到了回答：https://***.com/questions/18180490/move-border-bottom-closer-to-text

上面的解决方案可能会帮助那些无法为他们解决这个问题的人。

【讨论】：

此链接已失效。你碰巧记得解决方案吗？

【参考方案4】：

尝试this（原产俄语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; 

【参考方案5】：

您可以混合使用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;