Question

我想使用css创建一个包含有序列表的3列列表？

苹果
橙子
柠檬

现在它显示了一个无序列表，即使代码显示有序。

示例：1。苹果将成为第一列，Oranges将成为第二列，而不是第一列中的Apples，而第一列中的Oranges则是第一列。

<style> ol{margin-bottom:20px; overflow:hidden; width:600px;}
li{display:inline; float:left; line-height:1px;}
#two li {width:50%;}
#three li {width:33.333%;}
#four li {width:25%;}
#six li {width:16.666%;}
</style>




<code>
<ol id="3">
<li>
    <div class="fruit">
        apples
        oranges
        lemons
        etc..
    </div>
</li>
</ol>
  </code>

Answer 1

<ul>是一个无序列表。使用<ol>作为有序列表。

<ol>
    <li>item 1</li>
    <li>item 2</li>
</ol>

以下是一个有效的例子：w3schools tryit

Answer 2

正如弗拉姆所建议的，

您的代码应该类似于

<!DOCTYPE html>
<html>
<style> ol{margin-bottom:20px; overflow:hidden; width:600px;}
li{display:inline; float:left; line-height:15px;}
#two li {width:50%;}
#three li {width:33.333%;}
#four li {width:25%;}
#six li {width:16.666%;}
</style>
<body>

<h4>An Ordered List:</h4>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

</body>
</html>

我不明白为什么要定义#two，＃gehee等。

CSS - 使用css / Ordered创建3列

2 个答案: