如何将“内联块”与有序列表（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