CSS:粗体显示一些文本,而不更改容器的大小

前端之家收集整理的这篇文章主要介绍了CSS:粗体显示一些文本,而不更改容器的大小前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个水平导航菜单,这基本上只是一个< ul>其中元件并排设置。我不定义宽度,但简单地使用填充,因为我想要的宽度由菜单项的宽度定义。我粗体显示当前选择的项目。

麻烦的是,在粗体中,单词变得稍宽,这导致其余的元素稍微向左或向右移动。有没有聪明的方法来防止这种情况发生?沿着告诉padding忽略由粗体造成的额外宽度的线的东西?我的第一个想法是简单地从“活动”元素的填充减去几个像素,但这个量变化。

如果可能,我希望避免在每个条目上设置静态宽度,然后对中,而不是我目前的填充解决方案,以便将来更改条目简单。

编辑:图片的价值一千拙劣选择的话:

解决方法

我有同样的问题,但得到了一个类似的效果与一个妥协,我使用文本阴影代替。
li:hover {text-shadow:0px 0px 1px black;}

jsfiddle example

猜你在找的CSS相关文章