我使用HTML列表和CSS创建了一个水平菜单。除了当你将鼠标悬停在链接上时,一切都会正常工作。您看,我为链接创建了一个粗体悬停状态,现在由于粗体大小的差异,菜单链接发生了变化。
我遇到了和this SitePoint post一样的问题。然而,该帖子没有适当的解决方案。我到处寻找解决方案,但没有找到。当然,我不能是唯一一个这样做的人。
有谁有什么想法吗?
附注:我不知道菜单项中文本的宽度,所以我不能只设置li项的宽度。
.nav { margin: 0; padding: 0; }
.nav li {
list-style: none;
display: inline;
border-left: #ffffff 1px solid;
}
.nav li a:link, .nav li a:visited {
text-decoration: none;
color: #000;
margin-left: 8px;
margin-right: 5px;
}
.nav li a:hover{
text-decoration: none;
font-weight: bold;
}
.nav li.first { border: none; }
<ul class="nav">
<li class="first"><a href="#">item 0</a></li>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
发布于 2014-10-21 06:37:49
另一个想法是使用letter-spacing
li, a { display: inline-block; }
a {
font-size: 14px;
padding-left: 10px;
padding-right: 10px;
letter-spacing: 0.235px
}
a:hover, a:focus {
font-weight: bold;
letter-spacing: 0
}
<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
</ul>
发布于 2009-02-17 10:09:29
如果您不能设置宽度,则意味着宽度将随着文本变粗而更改。没有办法避免这一点,除非通过妥协,例如修改每个状态的填充/边距。
发布于 2012-12-04 19:17:44
你可以使用像这样的东西
<ul>
<li><a href="#">Some text<span><br />Some text</span></a></li>
</ul>
然后在css中,只需将span内容设置为粗体,并使用visibility: hidden将其隐藏,这样它就可以保持其尺寸不变。然后,您可以调整以下元素的边距以使其适合。
我不确定这种方法是否对SEO友好。
https://stackoverflow.com/questions/556153
复制相似问题