我想强调我的导航菜单,但问题是我需要它更厚,所以我使用底部边框,以便我可以将宽度设置为6px。
我似乎可以弄清楚如何让边框看起来更贴近文字。目前文本和底部边界之间似乎有10px的差距,我不想拥有任何内容。
我试图定位另一个div并将其相对于每个{li}定位{bottom:10px},但我似乎无法让它工作。
这就是我所拥有的
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{
}
答案 0 :(得分:17)
您可以使用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;
}
答案 1 :(得分:5)
如果较长的链接包含换行符,则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>
答案 2 :(得分:1)
尝试this(来源俄语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; }
答案 3 :(得分:0)
保证金属性不能改变边界底部位置,所以
#menu > ul > li > a {
height: ;
}
元素的高度将定义边框底部的位置。
{{1}}
答案 4 :(得分:-2)
与原始问题有类似的问题。 它的回答如下:https://stackoverflow.com/questions/18180490/move-border-bottom-closer-to-text
上述解决方案可能有助于其他无法解决此问题的解决方案。
答案 5 :(得分:-3)
尝试添加此内容:
padding-bottom: 5px;
到
#menu ul li a{