如何在两列中显示无序列表?

htmlweb developmentfront end technology更新于 2025/3/26 23:08:17

在 HTML 中，无序列表 是指无需按特定顺序排列的项目的集合。为了列出这些项目，我们经常使用简单的项目符号，因此它们通常被称为项目符号列表。无序列表以 <ul> 标签开头，以 </ul> 标签结尾。列表项以 <li> 标签开头，以 </li> 标签结尾。

<ul> 标签(代表无序列表)是 li 标签的父标签。这意味着 <li> 标签是 <ul> 标签的子标签。语法如下

<ul>List of Items</ul>

项目符号列表有四种类型:圆盘、圆形、方形和无。您可以通过 <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"属性指定元素内容应流入的最佳列数，以 <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>