3

HTML

<ul>
<li>The quick brown fox jumps over the lazy dog and the cat ran</li>
<li>sample 2</li>
<li>sample 3</li>
<li>sample 4</li>
<li>sample 7</li>
<li>sample 8</li>
<li>sample 9</li>
<li>The quick brown fox jumps over the lazy dog</li>
<li>sample 11</li>
<li>sample 12</li>
<li>sample 13</li>
<li>sample 14</li>
</ul>

CSS

ul {width:400px;}
ul li {width:196px;float:left;border:1px solid blue;height:100%;}

上下に隙間ができてしまったのですが、どうすれば隙間なくできるのでしょうか？ここにサンプルjsfiddleがあります

4

2 に答える 2

0

一定の高さを指定します。たとえば、height：40px;

于 2012-10-16T07:21:17.417 に答える
0

次の理由により、リストの乗車側の境界線がギャップを引き起こしています。

  • 境界線は要素クライアント領域の外側にあり、独自のレイアウト スペースがあります。したがって、境界線のある要素は、境界線のない要素よりも多くのスペースを必要とします。

  • 右側のリスト項目の数が左側よりも多くなっています。したがって、右側のリストの合計スペース (合計の高さ) は、左側のリストよりも大きくなります。

それを解決するために、ネガmarginを使用して、境界線によって使用されるレイアウト スペースを補正することができます。以下は、関連する変更の CSS です。

ul li {width:196px;float:left;border:1px solid blue;margin:-1px;height:100%;}
于 2012-10-16T08:41:36.290 に答える