In ul, how to divide 6 li into two columns?

In HTML and CSS, there are various ways to implement this.<ul>6<li>The elements are displayed in two columns. Below are several common methods:

Method 1: Use CSS Flexbox

You can<ul>Set it as a Flex container, then configure it accordingly.flex-wrapAttribute:wrapAnd specify each<li>Use the width of an element (e.g., 50%) to create a two-column layout.

<ul class="flex-container">  
  <li>项目 1</li>  
  <li>项目 2</li>  
  <li>项目 3</li>  
  <li>项目 4</li>  
  <li>项目 5</li>  
  <li>项目 6</li>  
</ul>  
  
<style>  
.flex-container {  
  display: flex;  
  flex-wrap: wrap;  
  list-style-type: none;  
  padding: 0;  
}  
  
.flex-container li {  
  flex: 1 0 50%; /* 占据50%的宽度，不伸缩，基础大小为50% */  
  box-sizing: border-box; /* 防止padding和border影响布局 */  
  padding: 10px; /* 示例padding */  
}  
</style>

Method 2: Use CSS Grid

CSS Grid is another powerful layout tool that allows for a very straightforward implementation of a two-column layout.

<ul class="grid-container">  
  <li>项目 1</li>  
  <li>项目 2</li>  
  <li>项目 3</li>  
  <li>项目 4</li>  
  <li>项目 5</li>  
  <li>项目 6</li>  
</ul>  
  
<style>  
.grid-container {  
  display: grid;  
  grid-template-columns: repeat(2, 1fr); /* 创建两列，每列占据可用空间的一部分 */  
  list-style-type: none;  
  padding: 0;  
}  
  
.grid-container li {  
  padding: 10px; /* 示例padding */  
}  
</style>

Method 3: Use CSS Columns

CSSand so oncolumnsAttributes can also easily be used to implement a multi-column layout; however, it's important to note that this approach automatically distributes content across multiple columns rather than explicitly specifying the position of each element.

<ul class="column-container">  
  <li>项目 1</li>  
  <li>项目 2</li>  
  <li>项目 3</li>  
  <li>项目 4</li>  
  <li>项目 5</li>  
  <li>项目 6</li>  
</ul>  
  
<style>  
.column-container {  
  columns: 2; /* 分为两列 */  
  column-gap: 20px; /* 列之间的间隙 */  
  list-style-type: none;  
  padding: 0;  
}  
  
.column-container li {  
  break-inside: avoid; /* 防止列表项被分割到两列中 */  
  padding: 10px; /* 示例padding */  
}  
</style>

Each of the three methods mentioned above has its own advantages and disadvantages; you can choose the most suitable one based on your specific requirements and project context.