Question

为什么是

的输出

<div class="tcol">
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

与

不同

<div>
  <ul class="tcol">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

用这个CSS吗？

.tcol
{
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
  column-count: 3;
  column-gap: 20px;
}

我不明白为什么会渲染一个空行。

如何删除第一个列表中的空行或者获取第二个列表中的项目符号？

Live demo is here

Answer 1

将margin:0添加到ul

.tcol
{
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
  column-count: 3;
  column-gap: 20px;
}
ul{
    margin:0
}

<强> DEMO

Answer 2

由于浏览器将<li>拆分为列，因此list-style-type已被推出普通视图。您可以通过将list-style-position: inside;属性添加到 tcol 类来更正此问题。

两种布局之间也存在非常明显的差异，不包括缺少的列表样式类型。使用Chrome中的元素面板并将每个<ul>和<li>悬停在一起，您可以看到浏览器如何布置列内容。

标记的第二个版本似乎更“正确”，容器正确地包含了列表项。

Answer 3

元素具有默认样式，如果您没有专门定义它们，浏览器会应用这些默认样式。

在项目中使用CSS重置然后以您需要的方式定义样式是一种很好的做法。

这是一个良好的开端来源：
http://meyerweb.com/eric/tools/css/reset/

例如，在您的情况下，FireFox会为16px元素（默认框模型）呈现UL上下边距。

UL vs DIV上的CSS列

3 个答案: