html - 当父元素具有绝对位置时如何避免文本换行？

Question

我有这样的结构:

<nav>
  <ul _v-2e9e2f12="">
    <li _v-2e9e2f12="">
      <a _v-2e9e2f12="">
      </a>
      <ul _v-0078ee36="" _v-2e9e2f12="">
        <li>List element</li>
        <li>List element</li>
        <li>List element</li>
      </ul>
    </li>
  </ul>
</nav>

ul[_v-0078ee36] 有 position: absolute 所以它里面的 li 元素有文本换行(没有全宽)。

如何更改 CSS 以使它们没有文本换行并扩展其父级的宽度？

JSFiddle:https://jsfiddle.net/d9jm82cb/6/

Answer 1

非常简单:

强制子 li 中的空格不换行:

nav > ul[_v-2e9e2f12] > li {
  white-space: nowrap;
}

演示: https://jsfiddle.net/d9jm82cb/7/