Question

我正在努力解决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>

相关的CSS：

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

a:hover {
  font-weight: bold;
  text-decoration: underline;
}

li + li {
  border-width: 0;
}

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

ul {
  padding: 14px 0;
  list-style: outside none none;
}

div {
  position: absolute;
  right: 0;
  top: 72px;
  width: 150px;
}

这一切都正常，除非将鼠标悬停在第二个链接（Test Longer 23 Item）上，这会导致粗体加下划线的文本换行到与其下方的锚标签重叠的第二行。我可以通过扩展div的宽度来轻松解决这个问题，这样它就不会换行，但是我希望有更动态的解决方案可以在悬停时“推”后续的li元素。

这在纯CSS中是否可行？

JS Bin

Answer 1

您可以通过将display: inline-block;添加到li来修复此问题。

工作代码段：

a {
  text-decoration: none;
  display: inline-block;
  padding: 0 10px;
  box-sizing: border-box;
}

a:hover {
  font-weight: bold;
  text-decoration: underline;
}

li + li {
  border-width: 0;
}

li {
  display: inline-block; /* <-- this! */
  height: 28px;
  line-height: 28px;
  padding: 0 5px;
  width: 100%;
}

ul {
  padding: 14px 0;
  list-style: outside none none;
}

div {
  position: absolute;
  right: 0;
  top: 72px;
  width: 150px;
}

<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>

Answer 2

使用min-height代替li而非严格height值，这会使它们重叠：

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

或者，如果您不希望它分成2行，只需添加正确的white-space值：

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

悬停在一个上时重叠的锚标签

2 个答案: