Align these ordered list and list element in a horizontal line

Question

I have the following HTML code:

<div>
  <ol class="sortable">
    <li id="list_1" class="nob"><div>A</div>
      <ol>
        <li id="list_2"><div>1</div></li>
        <li id="list_3"><div>2</div></li>
        <li id="list_4"><div>3</div></li>
        <li id="list_5"><div>4</div></li>
      </ol>
    </li>
    <li id="list_6" class="nob"><div>B</div>
      <ol>
        <li id="list_7"><div>1</div></li>
        <li id="list_8"><div>2</div></li>
      </ol>
    </li>
  </ol>
</div>

I want the output to be as :

|A|1|2|3|4|B|1|2|

Can anyone help me write the CSS for the same?

Thanks.

Answer 1

Basic solution:

.nob, .nob div, .nob ol, .nob li { display: inline; /* or inline-block */ }

Use inline if you don't need to control vertical margins. Otherwise you should consider using inline-block.

Answer 2

.sortable li, .sortable li div, .sortable li ol  {
    float:left;
}