0

マークアップはここにあります：

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

* {margin: 0; padding:0;}
ul{ border: 1px solid black; height: 100px;width:100%; display:block;} 
li{display:inline-block;width: 200px; height: 100px; background: red;}

ここでデモを見ることができます

私の混乱は、私はすでにすべてのマージンとパディングをゼロに設定しているのですが、なぜここにまだギャップがあるのですか？float: leftギャップをクリアするために設定する必要があるまで

</ p>

4

2 に答える 2

1

このhtmlを試してください

<ul>
     <li></li><!--
  --><li></li><!--
  --><li></li>
</ul>

作業中のjsfiddle

また、このcss-tricksの記事で説明と別の解決策を見つけることができます：インラインブロック要素間のスペースとの戦い

于 2012-11-26T07:21:02.943 に答える
0

このcssをスタイルシートに追加するだけです

ul{
font-size:0;
}
ul li{
font-size:12px; // according to your design 
}

ライブデモ

------

これを定義するよりも、すべてのliを1行に設定した場合 

ul{
white-space:nowrap;
}

更新されたデモ

于 2012-11-26T07:16:28.697 に答える