2

重複の可能性:
インライン ブロック リスト項目の不要なマージン
HTML から「見えないスペース」を削除する方法

私には<ul>複数の<li>子供がいます。

にはli画像が含まれているだけで、それらからすべてのマージンを削除しました。それらも呼び出しdisplay:inline-block;たので、一行で表示されるようになりました。

ただし、sの右側にはまだわずかな余裕がありliます。それが改行であり、それを削除すると余白が消えることがわかりました。ただし、改行をすべて削除する必要があると、非常に読みにくくなります。

この問題の解決策を教えてください。

HTML

<ul>

    <li><a href="#"><img src="image1.png" alt="post_heart" /></a></li>
    <li><a href="#"><img src="image2.png" alt="post_repeat" /></a></li>
    <li><a href="#"><img src="image3.png" alt="post_tag" /></a></li>
    <li><a href="#"><img src="image4.png" alt="post_share" /></a></li>

</ul>

以下

ul {
    display:inline;
    padding:none;
    margin:none;

    li {
        display:inline-block;

        padding:none;
        margin:none;

        a {
            display:block;  
            margin:none;
            border-right: 1px solid #e0e1e2;

            &:hover {
                .linearGradient(transparent, rgba(0,0,0,0.05));
            }
        }

        &:last-child {
            a {
                border:none;
            }
        }
    }
}
4

3 に答える 3

4

「マージン」は実際には空白 (タブ、スペース、または改行の組み合わせ) です。コメントアウトすることで、フォーマットを維持できます。

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

参照: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

于 2013-01-23T18:35:37.793 に答える
2

li に余裕がないことを確認してください。

また、インラインブロックを使用してこの問題に遭遇しました。マークアップでは、li 要素の間に空白を入れることはできません。そうしないとレンダリングされます。見苦しく見えますが、うまくいきました。

例これ

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

これの代わりに

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
于 2013-01-23T18:34:27.303 に答える
0

それらを作るだけfloat:leftです。それらがdisplay:inlineあるときは、常に約3pxのスペースがあると思います。

于 2013-01-23T18:34:35.487 に答える