使底部边界更接近文本 [英] Make Bottom Border Closer To Text

问题描述

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

我似乎想出了如何让边框更接近文字。在文本和底部边界之间似乎有一个10像素的差距，我不想有任何。

我试图定位另一个div，并相对于每个{li} {bottom：10px}，但我似乎无法使它工作。 / p>

这是我有的

CODE

 < div id =menu> 
< ul> 
< li>< a href =＃home>首页< / a>< / li> 
< li>< a href =＃about>关于< / a>< / li& 
< li>< a href =＃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 {
} 
  

line-height 和 margin c>获得这样的效果，像这样：

  #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; 
} 
  

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.

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.

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.

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

#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{
}

解决方案

You can use a mixture of line-height and margin to garner such an effect, like so:

#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;
}

这篇关于使底部边界更接近文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！