1

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もあります。これが問題の原因だと思います。

ボタンが次の行にジャンプするのではなく、注文の横に配置されるように修正する方法はありますか?

4

1 に答える 1

2

それは実際によく見えます。フィドルを参照してください。レンダリングに影響を与える他の 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%;} 

デモ:フィドル

于 2013-03-24T03:49:31.857 に答える