添加 CSS
- 使用 columns 属性并指定“2”作为值。 此外，添加 -webkit- 和 -moz- 前缀。
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
在具有 columns 属性的两列中显示无序列表的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
</style>
</head>
<body>
<ul>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
</ul>
</body>
</html>
在具有 column-count 属性的两列中显示无序列表的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
ul {
column-count: 2;
column-rule: dotted 1px #333;
list-style-type: none;
}
</style>
</head>
<body>
<ul>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
</ul>
</body>
</html>
在本教程中，我们可以看到如何使用 CSS 以两列显示无序列表。
我们将演示带有 CSS 列和列数属性的示例。
创建 HTML
- 将 <ul> 元素用于无序列表并添加 <li> 元素。
<ul> <li>Some text</li> <li>Some text</li> <li>Some text</li> <li>Some text</li> <li>Some text</li> <li>Some text</li> </ul>
日期：2020-06-02 22:15:08 来源：oir作者：oir