容器的宽度由粗体文本确定

时间:2012-04-12 14:10:12

标签: html css

我正在创建一个包含使用ul的菜单并浮动li的网页。要将活动页面与其他页面区分开来,以及当我将鼠标悬停在链接上时,文本将变为粗体。

我遇到的问题是,当文本变为粗体时,它会推动菜单中的所有内容。 (见:http://jsfiddle.net/tVDaf/

我想到的一个可能的解决方案是通过粗体文本的大小来确定每个菜单项的宽度,但我不知道这是否可行(至少,不使用javascript)。

有什么建议吗?

4 个答案:

答案 0 :(得分:1)

我可以为你看到三个选择。最后一个可能是你最好的选择:

  1. 使用JavaScript
  2. 使用等宽字体
  3. li标记
  4. 上设置宽度

答案 1 :(得分:0)

唯一真正的方法是将每个li设置为一定宽度,因为现在它被设置为其内部锚点的宽度。对锚点进行加粗而不是改变颜色通常不是好习惯。

答案 2 :(得分:0)

快速肮脏的黑客(逃避javascript),try to reduce padding on hover

答案 3 :(得分:0)

如果您无法设置宽度,则表示宽度将随着文本变为粗体而更改。除了通过修改每个状态的填充/边距等妥协之外,没有办法避免这种情况。

这个答案的所有学分都是针对Andrew Vit的,如果它帮助你在这里投票评论: Inline elements shifting when made bold on hover

并且请在发布之前搜索论坛,因为我已经看到这个来了很多