css - 如何将“内联块”与有序列表很好地对齐（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

它实际上看起来不错。见小提琴。似乎还有其他影响渲染的 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%;} 

演示：小提琴