ul中，如何讓6個li，分成兩列？

在HTML和CSS中，有多種方式可以實現將<ul>中的6個<li>元素分成兩列顯示。下面介紹幾種常見的方法：

方法1：使用CSS Flexbox

你可以將<ul>設置爲一個flex容器，然後通過設置flex-wrap屬性爲wrap，並指定每個<li>元素佔據的寬度（如50%），來實現兩列布局。

<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>

方法2：使用CSS Grid

CSS Grid是另一種強大的佈局工具，可以非常直接地實現兩列布局。

<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>

方法3：使用CSS Columns

CSS的columns屬性也可以很容易地實現多列布局，但需要注意的是，這種方法會將內容自動分配到多列中，而不是直接指定每個元素的位置。

<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>

以上三種方法各有優缺點，你可以根據具體需求和項目上下文選擇最適合的一種。