CODEWITHSUNDEEP
htmlcss
wyc
wyc

Reputation: 55283

How to avoid text wrap when the parent element has position absolute?

I have this structure:

<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] has position: absolute so the li elements inside it have text wrap (no full width).

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/

Upvotes: 0

Views: 38

Answers (1)

Arbel
Arbel

Reputation: 30999

Very simple:

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

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

Demo: https://jsfiddle.net/d9jm82cb/7/

Upvotes: 2

Related Questions