我有一个水平导航菜单，它基本上只是一个<ul>元素并排设置。我不定义宽度，而只是使用填充，因为我希望宽度由菜单项的宽度定义。我将当前选定的项目加粗。
问题在于，在加粗时，单词会变得稍微变宽，这会导致其余元素稍微向左或向右移动。有什么聪明的方法可以防止这种情况发生吗？是不是告诉填充忽略粗体引起的额外宽度？我的第一个想法是简单地从“活动”元素的填充中减去几个像素，但这个数量各不相同。
如果可能的话，我想避免在每个条目上设置静态宽度，然后居中，而不是我当前拥有的填充解决方案，以便使将来对条目的更改变得简单。
我遇到了同样的问题，但通过一点妥协得到了类似的效果，我使用了文本阴影。
li:hover {text-shadow:0px 0px 1px black;}
这是一个工作示例：
body {
font-family: segoe ui;
}
ul li {
display: inline-block;
border-left: 1px solid silver;
padding: 5px
}
.textshadow :hover {
text-shadow: 0px 0px 1px black;
}
.textshadow-alt :hover {
text-shadow: 1px 0px 0px black;
}
.bold :hover {
font-weight: bold;
}
<ul class="textshadow">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li><code>text-shadow: 0px 0px 1px black;</code></li>
</ul>
<ul class="textshadow-alt">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li><code>text-shadow: 1px 0px 0px black;</code></li>
</ul>
<ul class="bold">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li><code>font-weight: bold;</code></li>
</ul>
jsfiddle 示例
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
