html源代码中的第1列显示其他列下方的1行

Question

我有一个标准的html源代码，并且其中包含一个带有常规<ol>列表的文本，我希望在页面中显示2,3或4列，例如（没有表格可以使用）即可。当我在CSS中说我想要发生的事情时，文本会分成几列，但第一列比其他列低1行。如何使所有列在同一起始级别上显示？这是HTML部分：

<div id="references">   
    <ol>
        <li>Some text</li>
        <li>Some other text</li>
        <li>And again some text</li>
    </ol>
</div>

这是从http://www.w3schools.com/cssref/css3_pr_column-width.asp中的文档中简单复制的CSS部分：

#references {
    -webkit-column-width: 30em; /* Chrome, Safari, Opera */
    -moz-column-width: 30em; /* Firefox */
    column-width: 30em;
}

Answer 1

添加以下CSS：

#references ol{
   margin: 0;
}

Answer 2

这是因为ol有余量。您可以将其删除，以便所有列表元素都对齐。

ol {
    margin-top: 0px;
}

http://jsfiddle.net/ous9y59w/

Answer 3

您应该强制<ol>的margin-top为0px;

#references ol {
    margin-top: 0px;
}

请参阅jsfiddle链接

Answer 4

我觉得列宽太长了太久了.. 尽量减少这一点。喜欢在。

-webkit-column-width: 15em; /* Chrome, Safari, Opera */
-moz-column-width: 30px; /* Firefox */
column-width: 30px;