<div> 是 HTML 中的一個元素，用于創建容器或者將元素分組。而 CSS 是一種用于樣式化HTML元素的語言。CSS的列表樣式可以通過list-style-type屬性來設定，而div元素則可用于包裹列表使其能夠以<div>元素的形式展示。
<div>元素常常被用來包裹多個<ul>或<ol>元素，以添加樣式或布局。接下來，我們將通過幾個代碼案例來詳細介紹如何使用<div>和CSS樣式的列表。
，我們來看一個簡單的例子。假設我們想要將一個無序列表的項目以水平方向排列，我們可以使用以下代碼實現：

html
<div>
<ul class="horizontal-list">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</div>

css
.horizontal-list {
list-style-type: none;
display: flex;
justify-content: space-between;
}

以上代碼中，我們在<ul>元素外部添加了一個<div>元素，然后為<ul>添加了一個名為"horizontal-list"的class。接著，我們在CSS中定義了該class的樣式，將列表項通過display: flex;屬性以水平方向排列，并使用justify-content: space-between;屬性將項目之間均勻分布。
接下來，我們來看一個有序列表的例子。假設我們想要創建一個自定義的有序列表，每個項目的序號是一個字母加上一個圓點。我們可以使用以下代碼實現：

html
<div>
<ol class="custom-list">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
</div>

css
.custom-list {
list-style-type: none;
}
.custom-list li:before {
content: counter(my-counter) ". ";
counter-increment: my-counter;
}

以上代碼中，我們同樣在<ol>元素外部添加了一個<div>元素，并為<ol>添加了一個名為"custom-list"的class。然后，在CSS中我們定義了"custom-list" class的樣式，將列表項的默認樣式設為list-style-type: none;。接著，在.custom-list li:before選擇器下，我們使用content: counter(my-counter) ". ";屬性將項目序號設置為一個字母加上一個圓點，使用counter-increment: my-counter;屬性遞增序號。
通過以上兩個例子，我們可以看到如何使用<div>元素和CSS樣式來自定義和布局列表。根據實際需求，我們可以通過修改CSS樣式來實現更多不同樣式的列表，并通過<div>元素來包裹和布局列表，使頁面看起來更美觀。