我使用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.

其他回答

你可以用

<ul>
   <li><a href="#">Some text<span><br />Some text</span></a></li>
</ul>

然后在CSS中,将span content设置为粗体,用可见性隐藏它:hidden,这样它就能保持它的维度。然后,您可以调整以下元素的边距,使其适当适合。

我不确定这种方法是否是SEO友好的。

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

text-shadow: 0 0 0.01px;

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

这是我喜欢的解决办法。它需要一些JS,但你不需要你的标题属性完全相同,你的CSS可以保持非常简单。

$('ul a').each(function() { $(this).css({ 'padding-left': 0, 'padding-right': 0, 'width': $(this).outerWidth() }); }); li, a { display: inline-block; } a { padding-left: 10px; padding-right: 10px; text-align: center; /* optional, smoother */ } a:hover { font-weight: bold; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> </ul>

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

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 >

你可以使用"margin"属性:

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

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

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