将这些有序列表和列表元素对齐在水平线上

Question

我有以下HTML代码：

<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>

我希望输出为：

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

任何人都可以帮我写CSS吗？

感谢。

Answer 1

基本解决方案：

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

如果您不需要控制垂直边距，请使用inline。否则，您应该考虑使用inline-block。

Answer 2

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