1

現在、番号と項目が中央に配置され、左揃えになっている次のような順序付きリストがあります。

ここに画像の説明を入力

このcssを使用してこれを達成しました：

ol
{
padding-left:1em;
padding-right:1em;
display: inline-block;
text-align: left;

word-break: break-word !important;
/*white-space: nowrap*/

}

私が見ている問題は、テキストが奇妙に折り返されることです。リスト項目が他のリスト項目よりも一定の長さである場合、リスト項目が折り返されます (新しい行が作成されます)。これにより、上の図 (またはテキスト形式) のようなものが作成されます。

1.
寝袋
2.
テント3.食料品 4.ストーブ 5.ジャケット 6.
虫
よ
けスプレー

バッグが新しい行にあることに注意してください。ただし、それは div が終了する場所ではありません。を使用してみwhite-space: nowrapましたが、明らかにそれはそれが言うことを行い、長いテキストはdiv壊れることなく を超えて続きます。

また、ブラウザの不具合の一種である可能性もあります。なぜなら、戻ってきてページがキャッシュされたときに正しく読み込まれることがあり、クロムの代わりにサファリではwhite-space: nowrap.

ヘルプ/アイデアをいただければ幸いです。または、それが奇妙な修正不可能なものである場合は、申し訳ありません

4

2 に答える 2

1

以下のコードを試すことができます：

動作デモ

div{text-align:center;}
ol
  {
   padding-left:1em;
   padding-right:1em;
   display: inline-block;
   text-align: left;
   word-break: break-word !important;
   /*white-space: nowrap*/

  }
于 2016-06-06T06:28:57.567 に答える
0

リストに (より大きな) 幅を与える:

ol {
  width: 200px;
  ... rest of CSS
}

デバッグに関してはborder: 1px solid red;、要素がどこまで拡張されているかを確認できるように、 を追加することがよくあります。に追加すると、olその幅が改行の原因であることがわかります。したがって、大きくするとうまくいくはずです。

于 2016-06-06T06:27:14.930 に答える