我使用HTML列表和CSS创建了一个水平菜单。一切工作,它应该除了当你悬停在链接。您可以看到,我为链接创建了一个粗体悬浮状态,现在菜单链接因为粗体大小的差异而移动。

我遇到了和这篇SitePoint文章一样的问题。然而,这篇文章并没有合适的解决方案。我到处寻找解决办法,但没有找到。 我肯定不是唯一一个想这么做的人。

有人有什么想法吗?

附注:我不知道菜单项中文本的宽度,所以我不能只设置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>


当前回答

Seeing a lot of great but very involved answers here. There's really not a need for resetting widths, adding hidden elements, reworking elements for different layout declarations, etc. The simplest solution is just to account for the increase in size from the bold text by adjusting the font size in the hover declaration to a slightly smaller size. Like for example font-size: .985em from the normal 1em declaration, which allows the text to bold when hovered but also maintain the original size appearance.

其他回答

这个呢?一个javascript - CSS3免费的解决方案。

http://jsfiddle.net/u1aks77x/1/

ul{}
li{float:left; list-style-type:none; }
a{position:relative; padding-right: 10px; text-decoration:none;}
a > .l1{}
a:hover > .l1{visibility:hidden;}
a:hover > .l2{display:inline;}
a > .l2{position: absolute; left:0; font-weight:bold; display:none;}

<ul>
  <li><a href="/" title="Home"><span class="l1">Home</span><span class="l2">Home</span></a></li>
  <li><a href="/" title="Contact"><span class="l1">Contact</span><span class="l2">Contact</span></a></li>
  <li><a href="/" title="Sitemap"><span class="l1">Sitemap</span><span class="l2">Sitemap</span></a></li>
</ul>

你可以使用"margin"属性:

li a {
  margin: 0px 5px 0px 5px;
}

li a:hover {
  margin: 0;
  font-weight: bold;
}

只要确保左右边距足够大,以便额外的空间可以包含粗体文本。对于较长的单词,可以选择不同的页边距。 这只是另一种解决方法,但为我做了工作。

如果你不想预设列表项的宽度,一个真正好的替代方法是尝试在列表项中使用单宽字体。

与单行字体不同的是,它们仍然是比例字体——但它们在不同的字体权重上占据相同的大小。不需要CSS, JS,或花哨的hack来保持大小不变。它完全融入了字体中。

我认为这是一个很好的解决这个常见问题的方法。

下面是这篇优秀文章中的一个例子,比较了比例字体IBM Plex Sans和uniwidth Recursive。

注意在比例字体(IBM Plex Sans)中,列表项如何随着粗体字体的大小变化而变化。使用单宽字体递归,项目在悬停时变成粗体,但不改变大小。

你可以尝试的免费单宽字体有:

递归 PT根用户界面 “格罗斯”界面 看台上的

还有许多非免费的选项链接到前面提到的文章中。

另一个想法是使用字母间距

Li, a{显示:inline-block;} 一个{ 字体大小:14 px; padding-left: 10 px; padding-right: 10 px; 字母间距:0.235 px } A:悬停,A:焦点{ 粗细:大胆的; 字母间距:0 } < ul > <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> < / ul >

我使用文本阴影解决方案,其他一些提到这里:

text-shadow: 0 0 0.01px;

不同之处在于我没有指定阴影颜色,所以这个解决方案适用于所有字体颜色。