HTML 和 CSS 是前端開發基礎中的重要部分。今天我們將解析一道關于 HTML 和 CSS 的基礎題。

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 10px;
background-color: #333;
color: #fff;
padding: 5px;
}
li:hover {
background-color: #fff;
color: #333;
cursor: pointer;
}
</style>

以上代碼展示了一個無序列表，列表項使用了 display:inline-block 屬性，使得每個列表項可以在同一行內顯示。通過設置 margin-right 屬性，實現了列表項之間的間距。我們同時為列表項設置了一些樣式，包括背景顏色，字體顏色和內邊距等。通過添加偽類 :hover，實現了當我們鼠標懸停在列表項上時，顏色的反轉和光標的變化等效果。

我們可以通過修改 CSS 樣式表，來實現不同的列表效果。使用 Web 開發者工具可以快速調試樣式，在不斷嘗試和調整中提升自己的 CSS 能力。