2

Firefox では、コードが次のように改行でフォーマットされている場合:

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

これらの要素の間にはスペースがあります。それを取り除くには、次のようにコードを 1 行に配置する必要があります。

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

CSSマジックでこれを回避する方法はありますか?

編集: CSS をリセットしました:

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0;padding:0;border:0;font-size:100%;font:inherit;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
body{line-height:1;}
ol, ul{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after,q:before, q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing: 0;}

HTML5 doctype の使用<!doctype html>

4

1 に答える 1

2

あなたの質問を理解していると仮定すると、これを行う私のお気に入りの方法は次のとおりです。

ul { font-size:0 } ul li { font-size: 10px }

詳細はこちら: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

于 2013-10-01T22:06:21.347 に答える