我使用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>
我真的无法忍受有人告诉你不要那样做，而其实有一个简单的解决方法。我不确定li元素，但我刚刚修复了相同的问题。我有一个由div标签组成的菜单。
只需将div标签设置为“display: inline-block”。内联，所以他们坐在彼此和块，你可以设置宽度。只需要设置足够宽的宽度来容纳粗体文本，并使文本居中对齐。
(注意:它似乎剥离了我的html[下面]，但每个菜单项都有一个div标签围绕它与corrasponding ID和类名searchbar_category。ie: <div id="ROS_SearchSermons" class="SearchBar_Category">
超文本标记语言
(我有锚标签包装每个菜单项，但我不能提交他们作为一个新用户)
<div id="ROS_SearchSermons" class="SearchBar_Cateogry bold">Sermons</div>|
<div id="ROS_SearchIllustrations" class="SearchBar_Cateogry">Illustrations</div>|
<div id="ROS_SearchVideos" class="SearchBar_Cateogry">Videos</div>|
<div id="ROS_SearchPowerPoints" class="SearchBar_Cateogry">PowerPoints</div>|
<div id="ROS_SearchScripture" class="SearchBar_Cateogry">Scripture</div>|
CSS:
#ROS_SearchSermons { width: 75px; }
#ROS_SearchIllustrations { width: 90px; }
#ROS_SearchVideos { width: 55px; }
#ROS_SearchPowerPoints { width: 90px; }
#ROS_SearchScripture { width: 70px; }
.SearchBar_Cateogry
{
display: inline-block;
text-align:center;
}
我遇到过和你类似的问题。我想让我的链接变得粗体时，你悬停在他们，但不仅在菜单，而且在文本。正如你可以猜到的，这将是一个真正的苦差事，找出所有不同的宽度。解决方法很简单:
创建一个框，其中包含粗体的链接文本，但颜色像你的背景，但你的真实链接在上面。下面是我个人主页上的一个例子:
CSS:
.hypo { font-weight: bold; color: #FFFFE0; position: static; z-index: 0; }
.hyper { position: absolute; z-index: 1; }
当然，你需要将#FFFFE0替换为页面的背景色。z索引似乎没有必要，但我还是放了它们(因为“hypo”元素将出现在HTML-Code中的“hyper”元素之后)。现在，在你的页面上放一个链接，包括以下内容:
HTML:
You can find foo <a href="http://bar.com" class="hyper">here</a><span class="hypo">here</span>
第二个“这里”将是不可见的，隐藏在你的链接下面。因为这是一个静态的盒子
你的粗体链接文本，你的其余文本不会再移动，因为它已经移动之前，你悬停在链接。
如果不反对使用Javascript，可以在页面显示后设置适当的宽度。以下是我的做法(使用Prototype):
$$('ul.nav li').each(this.setProperWidth);
setProperWidth: function(li)
{
// Prototype's getWidth() includes padding, so we
// have to subtract that when we set the width.
var paddingLeft = li.getStyle('padding-left'),
paddingRight = li.getStyle('padding-right');
// Cut out the 'px' at the end of each padding
paddingLeft = paddingLeft.substring(0,paddingLeft.length-2);
paddingRight = paddingRight.substring(0,paddingRight.length-2);
// Make the li bold, set the width, then unbold it
li.setStyle({ fontWeight: 'bold' });
li.setStyle({ width: (li.getWidth() - paddingLeft - paddingRight) + 'px'});
li.setStyle({ fontWeight: 'normal', textAlign: 'center' });
}
折衷的解决方案是使用文本阴影来伪装粗体，例如:
文字阴影:0 0 0.01px黑色;
为了更好地进行比较，我创建了以下示例:
a, li {
color: black;
text-decoration: none;
font: 18px sans-serif;
letter-spacing: 0.03em;
}
li {
display: inline-block;
margin-right: 20px;
color: gray;
font-size: 0.7em;
}
.bold-x1 a.hover:hover,
.bold-x1 a:not(.hover) {
text-shadow: 0 0 .01px black;
}
.bold-x2 a.hover:hover,
.bold-x2 a:not(.hover){
text-shadow: 0 0 .01px black, 0 0 .01px black;
}
.bold-x3 a.hover:hover,
.bold-x3 a:not(.hover){
text-shadow: 0 0 .01px black, 0 0 .01px black, 0 0 .01px black;
}
.bold-native a.hover:hover,
.bold-native a:not(.hover){
font-weight: bold;
}
.bold-native li:nth-child(4),
.bold-native li:nth-child(5){
margin-left: -6px;
letter-spacing: 0.01em;
}
<ul class="bold-x1">
<li><a class="hover" href="#">Home</a></li>
<li><a class="hover" href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li>Bold (text-shadow x1)</li>
</ul>
<ul class="bold-x2">
<li><a class="hover" href="#">Home</a></li>
<li><a class="hover" href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li>Extra Bold (text-shadow x2)</li>
</ul>
<ul class="bold-native">
<li><a class="hover" href="#">Home</a></li>
<li><a class="hover" href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li>Bold (native)</li>
</ul>
<ul class="bold-x3">
<li><a class="hover" href="#">Home</a></li>
<li><a class="hover" href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li>Black (text-shadow x3)</li>
</ul>
传递给文本阴影非常低的模糊半径值将使模糊效果不那么明显。
一般来说，你重复的文字阴影越多，你的文字就会变得越粗壮，但同时也会失去字母的原始形状。
我应该警告你，将模糊半径设置为分数并不会在所有浏览器中呈现相同的效果!例如，Safari需要更大的值来呈现它，就像Chrome一样。
如果粗体字体比常规字体宽，你也可以试试负边距。(不总是)
因此，我们的想法是使用类来设置:hover状态的样式。
jQuery:
$(".nav-main .navbar-collapse > ul > li > a").hover(function() {
var originalWidth = $(this).outerWidth();
$(this).parent().addClass("hover");
$(this).css({
"margin-left": -(($(this).outerWidth() - originalWidth) / 2),
"margin-right": -(($(this).outerWidth() - originalWidth) / 2)
});
},
function() {
$(this).removeAttr("style");
$(this).parent().removeClass("hover");
});
CSS:
ul > li > a {
font-style: normal;
}
ul > li > a.hover {
font-style: bold;
}
希望我能帮上忙!
这是我喜欢的解决办法。它需要一些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>
CSS3解决方案-实验性(假大胆)
想分享一个不同的解决方案，没有人在这里建议。有一个属性叫text-stroke，它会很方便。
P跨度:悬停{
-webkit-text-stroke: 1px黑色;
｝
<p>一些东西，< span>hover this，</span> it's cool</p>
在这里，我针对span标签内的文本，我们用黑色像素描边它，这将模拟该特定文本的粗体样式。
注意，这个属性还没有得到广泛的支持，到目前为止(在写这个答案的时候)，似乎只有Chrome和Firefox支持这个属性。有关浏览器支持文本笔画的更多信息，可以参考CanIUse。
只是为了分享一些额外的东西，你可以使用-webkit-text-stroke-width: 1px;如果你不打算为你的笔画设置颜色。
我结合了上面的一些技术来提供一些东西，如果关闭js，它不会完全糟糕，如果使用jQuery，效果会更好。现在浏览器对亚像素字母间距的支持正在改进，使用它真的很好。
jQuery(document).ready(function($) {
$('.nav a').each(function(){
$(this).clone().addClass('hoverclone').fadeTo(0,0).insertAfter($(this));
var regular = $(this);
var hoverclone = $(this).next('.hoverclone');
regular.parent().not('.current_page_item').hover(function(){
regular.filter(':not(:animated)').fadeTo(200,0);
hoverclone.fadeTo(150,1);
}, function(){
regular.fadeTo(150,1);
hoverclone.filter(':not(:animated)').fadeTo(250,0);
});
});
});
ul {
font:normal 20px Arial;
text-align: center;
}
li, a {
display:inline-block;
text-align:center;
}
a {
padding:4px 8px;
text-decoration:none;
color: #555;
}
.nav a {
letter-spacing: 0.53px; /* adjust this value per font */
}
.nav .current_page_item a,
.nav a:hover {
font-weight: bold;
letter-spacing: 0px;
}
.nav li {
position: relative;
}
.nav a.hoverclone {
position: absolute;
top:0;
left: 0;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li class="current_page_item"><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
最好使用a::before而不是a::after，就像这样:
.breadcrumb {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.breadcrumb li,
.breadcrumb li a {
display: inline-block;
}
.breadcrumb li:not(:last-child)::after {
content: '>'; /* or anything else */
display: inline-block;
}
.breadcrumb a:hover {
font-weight: bold;
}
.breadcrumb a::before {
display: block;
content: attr(data-label);
font-weight: bold;
height: 0;
overflow: hidden;
visibility: hidden;
}
<ul class="breadcrumb">
<li><a data-label="one" href="https://www.google.fr/" target="_blank">one</a></li>
<li><a data-label="two" href="https://duckduckgo.com/" target="_blank">two</a></li>
<li><a data-label="three" href="#">three</a></li>
</ul>
详情请访问:https://jsfiddle.net/r25foavy/
如果你不想预设列表项的宽度，一个真正好的替代方法是尝试在列表项中使用单宽字体。
与单行字体不同的是，它们仍然是比例字体——但它们在不同的字体权重上占据相同的大小。不需要CSS, JS，或花哨的hack来保持大小不变。它完全融入了字体中。
我认为这是一个很好的解决这个常见问题的方法。
下面是这篇优秀文章中的一个例子，比较了比例字体IBM Plex Sans和uniwidth Recursive。
注意在比例字体(IBM Plex Sans)中，列表项如何随着粗体字体的大小变化而变化。使用单宽字体递归，项目在悬停时变成粗体，但不改变大小。
你可以尝试的免费单宽字体有:
递归
PT根用户界面
“格罗斯”界面
看台上的
还有许多非免费的选项链接到前面提到的文章中。
我可以给你两种建议
第一个选项:是将每个列表项的宽度设置为%
这里有一个简单的例子
<ul>
<li><a href="#">First Item</a></li>
<li><a href="#">Second Item</a></li>
<li><a href="#">Third Item</a></li>
<li><a href="#">Fourth Item</a></li>
</ul>
li {
list-style-type: none;
display: inline-block;
width: 24%;
}
a {
text-decoration: none;
color: #333;
font-size: 1.4em;
background: #A5C77F;
display: block;
padding: 10px 15px;
margin: 10px 0;
border-right: 1px solid whitesmoke;
transition: font-weight .3s;
}
a:hover {
font-weight: bold;
}
第二种选择:在活动元素上使用文本阴影
text-shadow: 0 0 .65px #333, 0 0 .65px #333;
但我建议使用第一个选项，即为每个元素指定一个百分比的宽度，因为文本阴影并不总是在移动浏览器中工作
