Question

我有一个非常简单的html无序列表：

<ul>
<li>First</li>
<li>Second</li>
</ul>

问题是firefox中这样一个列表的默认样式在每个列表项之间留下了很多空间 - 与<p>标记中的段落之间大致相同。我的google-fu今天证明是非常无用的 - 我如何减少垂直空间？我假设有一个css元素我可以应用于<ul>标签，但我似乎找不到任何东西。

（这是在页面的侧面导航元素中，所以它需要尽可能紧凑。）

Answer 1

除了所有其他答案之外，可能值得设置line-height: 1em;以减少每行的前导空间。当然，padding-top，padding-bottom，margin-top和margin-bottom都是最可能的罪魁祸首。

Answer 2

减少或消除顶部和底部边距和填充。 E.g：

li {
    margin: 0;
    padding: 0.2em;
}

PS：由于您使用的是Firefox，请尝试使用Firebug。当您在Firebug中单击HTML树中的元素时，它将突出显示页面本身上的元素。它分别对内容，边距和填充进行着色，以便您可以准确了解边距和填充对布局的影响。

Answer 3

将margin和padding CSS属性设置为您想要的任何大小。为了获得最大的紧凑性，请使用：

ul, li { margin: 0; padding: 0; }

Answer 4

这些都不适合我。

我有一个未排序的列表，其高度和宽度都必须与列表元素的填充和/或边距完全相同。实际上有9个列表元素必须放在3 x 3的正方形中。

对我有用的是放

li{
    height: 144px;
    width: 144px;
    float: left;
}

Answer 5

减少top-margin，bottom-margin和<li>元素的填充：

li { margin: 1em 3em; padding: 0.2em; }

Answer 6

属性边距和填充是正确的方法。

我想添加建议，使用预定义的reset-css文件重置你的完整css，就像Eric Meyer这样：Link

在此之后，您可以选择控制更多指定的样式。

Answer 7

我遇到过这个问题

Firebug。当您在Firebug中单击HTML树中的元素时，它将突出显示页面本身的元素。它为内容，边距和填充着色＆gt;单独进行，以便您可以准确了解边距和填充对布局的影响。

Firebug没有显示填充物或边缘。

当我更改显示属性时，间隙消失了。

li { 
display: inline-block;
}

然而，

产生了差距：

li { 
display: block;
}

没有。

Answer 8

ul {
    font-size: 0;
}
ul li {
    display: inline;
    font-size: 16px;
}

始终有效！