Css 将鼠标悬停在一个锚定标记上时重叠锚定标记

我正在解决一个CSS显示问题，除了简单地扩展父div的宽度外，我还一直在思考如何解决这个问题

布局如下：

<div>
  <ul>
    <li>
      <a href="javascript:void(0)">Test</a>
    </li>
    <li>
      <a href="javascript:void(0)">Test Longer 23 Item</a>
    </li>
    <li>
      <a href="javascript:void(0)">Test 2</a>
    </li>
  </ul>
</div>

除了将鼠标悬停在第二个链接（Test Longer 23 Item）上外，这一切都可以正常工作，这会导致粗体下划线文本环绕到第二行，该行与它下面的锚定标记重叠。我可以通过扩展

div

的宽度来轻松解决这个问题，这样它就不会缠绕，但我希望有一个更动态的解决方案，可以在悬停时“推”后续

li

元素

这在纯CSS中可能吗

---

对于

li

使用

min height

，而不是严格的

height

值，这将使它们重叠：

li {
  min-height: 28px;
  line-height: 28px;
  padding: 0 5px;
  width: 100%;
}

或者，如果不想将其拆分为两行，只需添加适当的

空白

值：

a {
  text-decoration: none;
  display: inline-block;
  padding: 0 10px;
  box-sizing: border-box;
  white-space: nowrap;
}

---

您可以通过添加

display:inline块来修复它到
li

工作代码片段：


a{
文字装饰：无；
显示：内联块；
填充：0 10px；
框大小：边框框；
}
a:悬停{
字体大小：粗体；
文字装饰：下划线；
}
李+李{
边框宽度：0；
}
李{
显示：内联块；/*您可以禁用线包装，但我会考虑使用不同的效果比粗体，或可能给它更多的空间……你正在设置的Li高度。（就水平对齐而言，它位于其他两个的左边）@SvenGrosen它实际上在我这边工作：，这是。请你尝试清除浏览器缓存好吗？啊，这可能是浏览器问题。它在Chrome中工作正常，但在FF（我最初使用的是FF）中工作正常，它有偏移量问题。@SvenGrosen若要解决此问题，请改为显示：内联块；
。答案已更新。因此，这是一个跨浏览器解决方案。：）
a {
  text-decoration: none;
  display: inline-block;
  padding: 0 10px;
  box-sizing: border-box;
  white-space: nowrap;
}