如何使用CSS使無序列表項目水平顯示？

如何讓無序列表水平連續顯示

您可以使用 CSS 以多種方式格式化 HTML 元素。一個常見的樣式任務是水平排列清單項目而不是垂直排列。本文介紹如何使用 display 屬性實現此效果。

問題

如何使用 CSS 使列表項目水平連續顯示？

解

列表項目通常是區塊元素，這表示它們顯示在自己的行上。要使它們水平流動，您需要將它們變更為內聯元素。這是使用 display 屬性完成的：

#ul_top_hypers li {
  display: inline;
}

在您的初始程式碼中，您已將 display: inline 屬性套用至 ul 元素本身。但是，這僅影響整個列表，而不影響單一列表項目。要讓清單項目水平顯示，您需要使用上下文選擇器將 display: inline 屬性特別套用到它們。

工作範例

這裡是一個更新的程式碼片段，示範如何顯示水平連續列出項目：

<div>

#div_top_hypers {
  background-color: #eeeeee;
  display: inline;
}

#ul_top_hypers li {
  display: inline;
}

以上是如何使用CSS使無序列表項目水平顯示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！