数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何将无序列表显示为两列？
在 HTML 中，无序列表是项目的集合，这些项目不必按照任何特定顺序排列。为了列出这些项目，我们经常使用简单的项目符号，因此它们通常被称为项目符号列表。无序列表以 <ul> 标记开头，以 </ul> 标记结束。列表项以 <li> 标记开头，以 </li> 标记结束。
<ul> 标记代表无序列表，它是 li 标记的父级。这意味着 <li> 标记是 <ul> 标记的子级。以下是语法
<ul>List of Items</ul>
项目符号列表可以有 4 种类型：disc、circle、square 和 none。这可以通过 <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” 属性定义理想的列宽，由
为了创建通用的多列布局，我们可以同时使用 column-count 和 column-width。column-count 指定最大列数，而 column-width 指定每列的最小宽度。通过组合这些属性，多列布局将在窄浏览器宽度下自动折叠成一列，从而无需媒体查询或其他规则。
“column-count” 属性
“column-count” 属性指定元素内容应流入的最佳列数，以 <integer> 表示或使用关键字 auto。如果此值和列宽都不为 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>
4K+ 次浏览
