css - CSS:在不更改其容器大小的情况下加粗一些文本

我有一个水平导航菜单，它基本上只是一个<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 example

关于css - CSS:在不更改其容器大小的情况下加粗一些文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57505790/