How can I create a horizontal list within a vertical list, while also incorporating a vertical list within a horizontal list using CSS?

Question

How can I create a horizontal list within a vertical list, while also incorporating a vertical list within a horizontal list using CSS?

I'm facing a challenge with two lists, one vertical and the other horizontal. I need to wrap one list inside the other, but the user can decide this at runtime. Setting the lists as display:block or display:inline-block doesn't seem to work in this case. Below is an example of the HTML structure:

<ul id="list1">
    <li>
        <ul id="list2"></ul>
    </li>
</ul>

There are also two classes available for the lists - .horizontal and .vertical with specific CSS rules.

.horizontal li {
    display: inline-block;
}

.vertical li {
    display: block;
}

The issue arises when the user assigns these classes at runtime. The outermost class seems to override the innermost class, impacting the layout of the nested list. How can I ensure that the CSS properties of the inner list remain intact regardless of which class is assigned by the user?

css

Answer 1

Answer №1

Instead of assigning classes to the outer list, consider using this approach

.horizontal li,
.vertical li li {
  display:inline-block;
  vertical-align:top;
}

.vertical li,
.horizontal li li {
  display:block;
}

<ul class="horizontal">
  <li>
    this is horizontal outer
    <ul>
      <li>this is vertical inner</li>
      <li>
        1 inner
      </li>
      <li>
        2 inner
      </li>
      <li>
        3 inner
      </li>

    </ul>
  </li>
  <li>
    1 outer 
  </li>
  <li>
    2 outer
  </li>
  <li>
    3 outer
  </li>
</ul>
<ul class="vertical">
  <li>
    this is vertical outer
    <ul>
      <li>this is horizontal inner</li>
      <li>
        1 inner
      </li>
      <li>
        2 inner
      </li>
      <li>
        3 inner
      </li>

    </ul>
  </li>
  <li>
    1 outer 
  </li>
  <li>
    2 outer
  </li>
  <li>
    3 outer
  </li>
</ul>

Answer 2

Instead of assigning classes to the outer list, consider using this approach

.horizontal li,
.vertical li li {
  display:inline-block;
  vertical-align:top;
}

.vertical li,
.horizontal li li {
  display:block;
}

<ul class="horizontal">
  <li>
    this is horizontal outer
    <ul>
      <li>this is vertical inner</li>
      <li>
        1 inner
      </li>
      <li>
        2 inner
      </li>
      <li>
        3 inner
      </li>

    </ul>
  </li>
  <li>
    1 outer 
  </li>
  <li>
    2 outer
  </li>
  <li>
    3 outer
  </li>
</ul>
<ul class="vertical">
  <li>
    this is vertical outer
    <ul>
      <li>this is horizontal inner</li>
      <li>
        1 inner
      </li>
      <li>
        2 inner
      </li>
      <li>
        3 inner
      </li>

    </ul>
  </li>
  <li>
    1 outer 
  </li>
  <li>
    2 outer
  </li>
  <li>
    3 outer
  </li>
</ul>

How can I create a horizontal list within a vertical list, while also incorporating a vertical list within a horizontal list using CSS?

Answer №1

Similar questions

Using .htaccess to Conceal Directories with Documents

Creating a dynamic scene with three.js within an HTML div element

Navigate only within the tbody section of the Material UI Table by scrolling

There appears to be an unusual white line running along the right side of the page

Choosing elements in jQuery

The selector By.PARTIAL_LINK_TEXT in Selenium is failing to meet the expected condition

In HTML, the size and position of an <a> element cannot be altered or adjusted

Guide to animating the height of a div using jQuery:

Spacing between division elements and a footer that is positioned with float property

Is there a way to get rid of the "bouncing effect" on my button while using an inline floating-label text input?

What is the best way to display my icon <div>s side by side instead of on top of each other?

Show off the images once they have finished loading completely?

selection menu and advancement gauge

"Creating a fixed header with jQuery by manipulating the offset and scrollTop

Header fixed vertically

Can someone help me understand how to change the structure in order to identify which class has a body?

Is there a way to save an HTML page and its accompanying files on an Android device?

What is the correct way to properly insert a display none attribute

When clicking on ASP.NET sidebar styles, they continuously refresh

Looking to adjust the positioning of text being inserted into a column - unable to utilize text-align or float properties