\<div> 元素可以用于創建一個容器，用于組合其他 HTML 元素。它是一個塊級元素，通常用于組織和布局頁面的內容。而 \<ul> 元素用于創建一個無序列表，其中的每一項都被表示為一個列表項 (\<li>)。那么，如何將 \<ul> 元素排列在 \<div> 元素中呢？接下來，將通過幾個代碼案例來詳細解釋和說明。
案例一： 假設我們有一個 \<div> 元素，其 id 為 "container"，我們想將一個 \<ul> 元素排列在其中。我們可以使用 CSS 的 display 屬性將其設置為塊級元素，并定義一些樣式來調整其布局：
\

#container {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
}
<br>
#container ul {
list-style-type: none;
padding: 0;
margin: 0;
}
<br>
#container ul li {
margin-bottom: 5px;
}
\

以上代碼中，我們先定義了 \<div> 元素的樣式，包括邊框、外邊距和內邊距。然后，通過選擇器 "#container ul"，我們指定了要應用到 \<ul> 元素的樣式，其中包括將列表項的標志置為空，以及去除列表項的內邊距和外邊距。最后，使用選擇器 "#container ul li"，我們定義了列表項之間的外邊距。
案例二： 上述案例中的布局使用了默認的垂直排列方式。那么，如果我們想要水平排列 \<ul> 元素的列表項呢？可以使用 CSS 的 display 屬性和 float 屬性來實現：
\

#container ul li {
float: left;
margin-right: 10px;
}
\

在上述代碼中，我們給列表項添加了 float 屬性，并將其設置為 left，這樣列表項將以水平方式排列在一行中。另外，使用 margin-right 屬性為列表項之間添加了一些右側空白間距，以增加可讀性。
案例三： 如果我們想要將多個 \<ul> 元素垂直排列在同一個 \<div> 元素中，可以使用 CSS 的 display 屬性和 clear 屬性來實現：
\

#container ul {
clear: both;
}
\

在上述代碼中，我們通過將 clear 屬性設置為 both 來清除 \<ul> 元素的左右浮動，使得下一個 \<ul> 元素能夠另起一行垂直排列。
通過以上幾個案例，我們可以看到，通過使用 CSS 和一些簡單的樣式定義，我們可以將 \<ul> 元素排列在 \<div> 元素中，實現不同的布局效果。當然，我們還可以進一步探索和應用其他的 CSS 屬性和技巧，以滿足更多個性化的需求。