1

float要素に適用すると、含まれている要素に高さがないliことを意味しているように見えるという事実に混乱しています。このjsFiddleでul示されている問題を確認できます。

ul基本的には、任意の数のli要素でを作成したいと思います。各li要素の幅を20％にしたいので、li1行あたり5つの要素になります。

また、要素にある程度の高さを持たせたいulので、下の境界線を適用できます。

このクラスをlisで使用する場合：

.result1 { 
  width: 20%;
  float: left;
}

その場合、ulの高さは0です。推奨する投稿を見たことdisplay: inline-blockがありますが、代わりにこれを使用すると、次のようになります。

.result2 { 
  width: 20%;
  display: inline-block;
}

その場合、にulは高さがありますが、sの間に空白があるliため、2行にまたがっています。

これは私が理解していないCSS仕様の何かであるに違いありません。含まれている要素の高さで、行ごとに5つの要素を取得するにはどうすればよいですか？

4

2 に答える 2

5

overflow: hidden;親に追加<ul class="results">

フィドル

于 2013-03-19T17:53:46.433 に答える
2

フローティング要素により親が折りたたまれるため、親要素をクリアする必要があります。

.results:after {
  content: "";
  display: table;
  clear: both;
}

http://jsfiddle.net/CuCdr/1/

于 2013-03-19T17:53:27.100 に答える