liの間の不要なスペース

Question

私は、li-itemをborder-bottomで区切ります。 ただし、表示されて不要なスペースがあります。

これらのスペースはどこから来た誰もが知っています：

Chromeはパディング/マージンがない私に指示しますか？

コード：あなたのインラインスタイルのdivの上

<ul style="list-style-type: none; padding: 0;"> 
 
    <% 15.times do |whatever| %> 
 
    <li style="border-bottom: 1px solid red;"> 
 
     <div style="width: 100%; height: 50px; background-color: green; display: block; "> 
 
     </div> 
 
    </li> 
 
    <% end %> 
 
</ul>

Answer 1

あなたはピクセルの丸めの問題を見ています。

代わりに境界線をdivに追加することができます。この場合、アーチファクトのないズームが可能です。

li div { 
 
    border-bottom: 1px solid red; 
 
}

<ul style="list-style-type: none; padding: 0;"> 
 
    <li> 
 
    <div style="width: 100%; height: 50px; background-color: green; display: block; "> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div style="width: 100%; height: 50px; background-color: green; display: block; "> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div style="width: 100%; height: 50px; background-color: green; display: block; "> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div style="width: 100%; height: 50px; background-color: green; display: block; "> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div style="width: 100%; height: 50px; background-color: green; display: block; "> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div style="width: 100%; height: 50px; background-color: green; display: block; "> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div style="width: 100%; height: 50px; background-color: green; display: block; "> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div style="width: 100%; height: 50px; background-color: green; display: block; "> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div style="width: 100%; height: 50px; background-color: green; display: block; "> 
 
    </div> 
 
    </li> 
 
</ul>

Answer 2

削除身長

<ul style="list-style-type: none; padding: 0;"> 
 
    <% 15.times do |whatever| %> 
 
    <li style="border-bottom: 1px solid red;"> 
 
     <div style="width: 100%; background-color: green; display: block; "> 
 
     </div> 
 
    </li> 
 
    <% end %> 
 
</ul>

Answer 3

を適用してみてください〜<LI>および/または<div>

ここにサンプルを追加しています。これをチェックしてください。

ul li{ 
 
     border-bottom: 1px solid red; 
 
     margin: 0; 
 
     list-style: none; 
 
    } 
 
    ul li div{ 
 
     width: 100%; 
 
     height: 40px; 
 
     background-color: green; 
 
     display: block; 
 
    }

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