CODEWITHSUNDEEP
htmlcss
UrbKr
UrbKr

Reputation: 663

First <li> element in <ul> in same line

<ul>
  <li>1</li>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </ul>
</ul>

How would I display this list like so:

enter image description here

Upvotes: 3

Views: 1709

Answers (4)

Jay
Jay

Reputation: 1599

.aligned-innerlist {
  margin-top: -17px;
}
  <ul>
    <li>1
    <ul class="aligned-innerlist">
      <li>a</li>
      <li>b</li>
      <li>c</li>
    </ul>
    </li>
  </ul>

Upvotes: 0

Ravi Shankar Bharti
Ravi Shankar Bharti

Reputation: 9268

use display:inline-block in your nested ul tag, along with vertical-align:top

<ul>
  <li>
  <ul style="display:inline-block;vertical-align:top;">
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </ul>
  </li>
</ul>

Upvotes: 2

Boky
Boky

Reputation: 12064

You can add float: left to ul li and ul ul as follows:

    <ul>
      <li style="float: left;">1</li>
      <ul style="float: left;">
        <li>a</li>
        <li>b</li>
        <li>c</li>
      </ul>
    </ul>

Upvotes: 1

Ori Drori
Ori Drori

Reputation: 191986

Display the ul as inline-block inside the li, and align it vertically to top:

.nested {
  display: inline-block;
  vertical-align: top;
}
<ul>
  <li>1
    <ul class="nested">
      <li>a</li>
      <li>b</li>
      <li>c</li>
    </ul>
  </li>
</ul>

Upvotes: 5

Related Questions