3

私は次のHTMLを持っています:

<div class="container">
    <ul>
        <li><img src="30x30.gif" /></li>
        <li><img src="30x30.gif" /></li>
        <li><img src="30x30.gif" /></li>
    </ul>
    <div style="clear: both" />
</div>

これらの画像を水平方向にうまく並べたいので、次のCSSを適用します。

div, p, ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

div.container > ul li {
    float: left;
    background-color: yellow;
}

これは機能します。ただし、何らかの理由で<li>要素の下部に 4px のギャップがあります。黄色の背景のスライバーが見えるので、これを知っています（すべてではなく、一番下にあります）。

これが起こっている例をここで見ることができます: http://jsfiddle.net/DBcPw/

注:これは、<li>要素に画像が含まれている場合にのみ発生するようです。代わりに要素で試してみると<p>、問題は発生しません。

だから、私の2つの質問は次のとおりです。

  1. なぜこうなった？
  2. 修正するにはどうすればよいですか?
4

3 に答える 3

5

これがjsfiddleの更新です

追加した：

img{display:block; float:left;}

ブラウザーが画像に適用する傾向がある追加のパディングとマージンを削除して、不要なスペースを画像に与えます。間隔を空けたいdisplay :block場合はそれらを作成し、それらを並べて配置したい場合は画像を作成しますfloat:left。

于 2013-04-15T09:17:31.987 に答える
1

タグは、<img>現在使用しているフォントから間隔をとります (空白に依存します) のでfont-size: 0;、<li>s に設定すれば問題ありません。

li {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
}

http://jsfiddle.net/Kyle_Sevenoaks/DBcPw/2/

于 2013-04-15T09:17:44.783 に答える
0

のli高さは の高さと一致する必要がありimgます。

div.container > ul li {
    float: left;
    background-color: yellow;
    height: 30px;
}

作業例 http://jsfiddle.net/DBcPw/6/

于 2013-04-15T09:17:20.127 に答える