当父元素具有绝对位置时如何避免文本换行? [英] How to avoid text wrap when the parent element has position absolute?

问题描述

我有这个结构:

<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 元素有文本换行(没有全宽).

ul[_v-0078ee36] has position: absolute so the li elements inside it have text wrap (no full width).

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

How to change the CSS so they don't have text wrap and expand the width of their parent?

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

推荐答案

很简单:

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

Force the white space in the child lis to not wrap:

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

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

这篇关于当父元素具有绝对位置时如何避免文本换行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！