css - 如何将 "inline-block"与有序列表很好地对齐 (ol)

Question

我的 ol 列表有对齐问题。我有一个像这样的简单列表:

<ol type="a">
  <li><button style="display: inline-block">TEXT1</button></li>
  <li><button style="display: inline-block">TEXT2</button></li>
  <li><button style="display: inline-block">TEXT3</button></li>
  <li><button style="display: inline-block">TEXT4</button></li>
</ol>

当这些文本很短时，我会像这样在顺序字符旁边对齐文本:

但是当文本较长时，它会跳到下一行，而不是按照这样的顺序在同一行对齐:

编辑:正如大家所指出的，为了重现问题，我遗漏了 LI 的一些属性。每个 LI 元素也有 "list-style-position: inside"css，我认为这是问题的根源。

有没有办法更正它，使按钮与订单对齐而不是跳到下一行？

Answer 1

看起来确实不错。参见 fiddle .似乎还有其他 CSS 影响渲染。也请发布 CSS。如果你担心有多行，使用这个:

ol li button {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

因为你有一个 list-style-position: inside，你可以使用这个:

li {list-style-position: inside;}
li button {width: 90%;} 

演示:Fiddle