在UL与DIV上的CSS列 [英] CSS Columns on UL vs DIV

问题描述

为什么

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

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

I don't understand why an empty line is rendered.

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

How can I either remove the empty line in the first list or get the bullet points in the second one?

现场演示在这里。

推荐答案

元素有默认样式，如果没有特别定义，浏览器会应用这些默认样式。

Elements have default styles, browsers apply those default styles if you don't specifically define them.

这是一个很好的做法，

It's a good practice to use a CSS reset on your projects and then define the styles the way you need them.

这是一个很好的开始源：


http://meyerweb.com/eric/tools/css/reset/

Here is a good source for a start:
http://meyerweb.com/eric/tools/css/reset/

例如在你的情况下，FireFox为 UL 呈现 16px $ c>元素（默认框模型）。

For example in your case FireFox renders a 16px top and bottom margin for the UL element (default box model).

这篇关于在UL与DIV上的CSS列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！