1

为什么输出为

<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;
}

我不明白为什么会呈现空行。

如何删除第一个列表中的空行或获取第二个列表中的要点？

现场演示在这里。

4

3 回答 3

1

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

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

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

于 2013-04-26T08:00:09.523 回答
1

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

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

这是一个很好的起点： http:
//meyerweb.com/eric/tools/css/reset/

例如，在您的情况下，FireFox16px为元素呈现顶部和底部边距UL（默认框模型）。

于 2013-04-26T08:00:23.327 回答
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
}

演示

于 2013-04-26T07:49:16.537 回答