极客笔记HTML 如何在两列中显示无序列表
在HTML中， 无序列表 是不必按任何特定顺序排列的项目集合。为了列出这些项目，我们经常使用简单的项目符号，因此它们通常被称为带项目符号的列表。无序列表以<ul>标签开头，并以</ul>标签结尾。列表项以<li>标签开头，并以</li>标签结尾。
<ul>标签是li标签的父元素。这意味着<li>标签是<ul>标签的子元素。以下是语法：
<ul>List of Items</ul>
有4种类型的项目列表：实心圆点，空心圆点，实心方块和无样式。可以通过在<ul>标签中指定type属性或CSS的list-style-type属性来确定。无序列表的默认外观如下所示。
示例
<!DOCTYPE html>
<html>
<head>
<title>An example of a simple unordered list</title>
</head>
<body>
<p>Vegetables</p>
<ul>
<li>Capsicum</li>
<li>Brinjal</li>
<li>Onion</li>
<li>Tomato</li>
</ul>
</body>
</html>
如我们所见，默认情况下，列表项以单列形式显示。但是，我们可以通过使用CSS样式属性来更改此设置，将列表显示为两列或多列。
使用“column-width”和“column-count”属性
“column-width”属性定义理想的列宽，可以使用或关键字auto进行指定。实际宽度可能较宽或较窄以适应可用空间。此属性是适应性的。将column-width视为浏览器的最小宽度建议。当浏览器无法在指定的宽度下容纳至少两列时，列将停止并折叠为单列。
为了创建一个多功能的多列布局，我们可以同时使用column-count和column-width。column-count指定了最大列数，而column-width指定了每个列的最小宽度。通过组合这些属性，多列布局将在窄的浏览器宽度下自动折叠为单列，无需媒体查询或其他规则。
“column-count”属性
“column-count”属性指定元素内容应流动到的最佳列数，以或关键字auto表示。如果既不是这个值也不是column width为auto，则该属性仅表示可使用的最大列数。与column-width属性相反，此属性无论浏览器宽度如何，都保留列数。
示例
在下面的示例中，我们将使用CSS的“column-count”属性指定列数，创建一个带有两列的有序列表。
<!DOCTYPE html>
<html>
<head>
<title>How to Display Unordered List in Two Columns?</title>
<style>
ul {
column-count: 2;
column-gap:20px;
}
div{
background-color:seashell;
color:palevioletred;
border:2px solid mistyrose;
border-radius:10px;
height:180px;
width:520px;
padding:5px;
margin:10px;
}
li{
padding:2px;
}
</style>
</head>
<body>
<h4>Top Engineering Colleges in Hyderabad</h4>
<div>
<ul type="square">
<li>IIT Hyderabad</li>
<li>IIT Hyderabad</li>
<li>Jawaharlal Nehru Institute of Technology</li>
<li>Osmania University</li>
<li>Chaitanya Bharati Institute of Technology</li>
<li>VNR/ VJIET Hyderabad</li>
<li>Vasavi College of Engineering</li>
<li>Sreenidhi Institute of Technology</li>
<li>Gokaraju Rangaraju Institute of Technology</li>
<li>G. Nayarayanamma Institute of Technology</li>
</ul>
</div>
</body>
</html>
使用’columns’属性
‘columns’ CSS简写属性指定绘制元素内容时要使用的列数以及这些列的宽度。该属性是CSS属性column-count和column-width的简写形式。它可以接受column-count、column-width或两个属性。
columns: auto|column-width column-count;
‘auto’ 将column-width和column-count值设置为浏览器默认值。
示例
在下面的示例中，我们将通过使用CSS的‘columns’属性来指定列数，创建一个包含两列的有序列表。
<!DOCTYPE html>
<html>
<head>
<title>How to Display Unordered List in Two Columns?</title>
<style>
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
div{
background-color:papayawhip;
color:saddlebrown;
border-radius:20px;
height:180px;
padding:5px;
width:550px;
}
li{
padding:2px;
}
</style>
</head>
<body>
<h4>Top Engineering Colleges in Hyderabad</h4>
<div>
<ul type="circle">
<li>IIT Hyderabad</li>
<li>IIT Hyderabad</li>
<li>Jawaharlal Nehru Institute of Technology</li>
<li>Osmania University</li>
<li>Chaitanya Bharati Institute of Technology</li>
<li>VNR/ VJIET Hyderabad</li>
<li>Vasavi College of Engineering</li>
<li>Sreenidhi Institute of Technology</li>
<li>Gokaraju Rangaraju Institute of Technology</li>
<li>G. Nayarayanamma Institute of Technology</li>
</ul>
</div>
</body>
</html>