2

インラインブロックを使用して水平に配置している LI が多数あります。

それはとてもうまく機能します。

| [LI1]-[LI2]-[LI3] |
| [LI4   ]-[LI5]    |
| [LI6]-[LI7]-[LI8] |

私のブラウザでは、ウィンドウの幅と個々の LI の幅によって異なります。

いくつかの LI の後に「改行」が必要です。たとえば、LI2 の後に「改行」を入れると、

| [LI1]-[LI2]       |
| [LI3]-[LI4   ]    |
| [LI5]-[LI6]-[LI7] |
| [LI8]             |

もちろん、LI3 も一線を画している可能性があります。

すべての LI の CSS を完全に制御できます。

ありがとうございました！

4

2 に答える 2

0

CSSのトリックではこれを行いません。表示するリストの構造を反映するようにHTMLを変更します。

ここでは、の各水平セット<li>は独自のものであると言えます<ul>。つまり、リストのリストがあります。

このJsFiddleを確認してください。このようにして、一部のCSSで動作が隠されることなく結果を取得し、マークアップで何が起こっているかを簡単に確認できます。

編集：わかりました。HTMLに触れることができないので、すべて<li>を左にフロートさせてから、<li>各行の最初の行を作成できclear:leftます。JsFiddleへのこの編集を参照してください...

于 2013-02-01T15:21:51.430 に答える
0

特定の要素を「改行」したい場合は、クリアを追加するだけです。

.myelement {
  clear: both;
}


<li>Hi</li>
<li>There</li>
<li class="myelement">Neighbor!</li>

要素は自然に左に移動します。すべての要素が float: left に設定されている場合、それらはすべて左に移動し、部屋がなくなるたびに壊れます。 clear:both;それらをその行の唯一のアイテムにします。

于 2013-02-01T16:30:26.033 に答える