CSS:在不改变容器大小的情况下加粗一些文本

Question

我有一个水平导航菜单，基本上就是一个 <ul>元素并排设置。我没有定义宽度，只是使用填充，因为我希望宽度由菜单项的宽度定义。我将当前选择的元素加粗。

麻烦的是，在加粗时，单词会变得稍微宽一些，这会导致其余元素稍微向左或向右移动。有没有聪明的方法来防止这种情况发生？沿着告诉填充忽略由粗体引起的额外宽度的东西？我的第一个想法是简单地从“事件”元素的填充中减去几个像素，但这个数量会有所不同。

如果可能的话，我想避免在每个条目上设置静态宽度然后居中，而不是我目前使用的填充解决方案，以便将来对条目的更改变得简单。

Answer 1

我遇到了同样的问题，但经过一点折衷得到了类似的效果，我改用了 text-shadow 。

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 example