2

在 Firefox 中,当代码使用换行符格式化时,如下所示:

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

这些元素之间有空间。为了摆脱它,我必须将代码放在一行上,如下所示:

<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 html>

4

1 回答 1

2

假设我理解你的问题,我最喜欢的方法是:

ul { 字体大小:0 } ul li { 字体大小:10px }

这里有更多信息:http ://css-tricks.com/fighting-the-space-between-inline-block-elements/

于 2013-10-01T22:06:21.347 回答