CSS中的

和
• 標簽是用來創建列表的，通常情況下我們使用這些標簽來創建一個垂直列表。但是，我們也可以將這些列表元素排列成水平方向。

  為了將

  和
  • 列表元素水平排列，我們需要加入一些CSS屬性，以控制它們的顯示方式。下面是一個基本的CSS樣式，以使所有列表元素都水平排列：

    ul {
    display: flex;
    list-style: none;
    }
    li {
    margin-right: 20px;
    }

    在上面的代碼中，我們使用了flex布局來使列表元素水平排列。list-style: none;是為了清除列表項前面的默認樣式，使其無序列表項不再有小圓點。接著，我們使用了margin-right來為每個列表項添加右邊距，以分隔它們。

    這些基本樣式可以幫助我們使列表元素水平排列，但是我們還可以進一步定制樣式來創建我們想要的外觀和效果。例如，我們可以設置每個列表項的寬度和高度，以及添加背景顏色和邊框等。下面是一個例子：

    ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    }
    li {
    width: 100px;
    height: 50px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    }
    li:last-child {
    margin-right: 0;
    }

    在上面的代碼中，我們設置了

    和
    • 的padding和margin為0，以免它們在頁面中留下空白。我們還設置了每個列表項的寬度和高度，并設置了一個背景顏色和邊框。 border-radius屬性為邊框添加了圓角效果。

      我們還為每個列表項添加了display: flex和align-items: center樣式，以使它們垂直居中。justify-content: center使其水平居中。我們還定義了字體大小、顏色和粗細來顯示文本內容。

      最后，我們使用:last-child偽類選擇器從最后一個列表項中刪除右邊距，以使該項與其它項完美對齊。

      總的來說，

      和
      • 標簽提供了創建列表的方便方法，而通過添加CSS樣式，我們可以定制列表的外觀和行為，使其符合我們的設計要求。