Adobe Dreamweaver，簡稱"DW"，中文名稱"夢想編織者"，最初為美國MACROMEDIA公司開發(fā)[1]，2005年被Adobe公司收購。在日常的網(wǎng)頁制作中，經(jīng)常會遇到需要將多個列表項(

Adobe Dreamweaver，簡稱"DW"，中文名稱"夢想編織者"，最初為美國MACROMEDIA公司開發(fā)[1]，2005年被Adobe公司收購。在日常的網(wǎng)頁制作中，經(jīng)常會遇到需要將多個列表項(li)橫向排列的情況。下面我們一起學(xué)習(xí)如何使用 CSS 實現(xiàn)這個效果。

步驟一：新建 HTML 頁面

利用 Dreamweaver，新建一個 HTML 頁面。在 body 標簽內(nèi)輸入以下基礎(chǔ)代碼:

```html

• 列表項 1
• 列表項 2
• 列表項 3
• 列表項 4

```

此時，默認情況下列表項會垂直排列。

步驟二：設(shè)置 CSS 樣式

接下來，我們需要編輯 li 標簽的 CSS 樣式。在 style 標簽內(nèi)添加以下代碼:

```css

ul li {

float: left;

list-style: none;

}

```

- `float: left;` 可以讓列表項水平排列。

- `list-style: none;` 可以去除列表前的默認小圓點。

至此，多個 li 標簽就可以橫排顯示了。

最終效果

通過以上步驟，我們成功地實現(xiàn)了將多個 li 標簽橫排顯示的效果。這種方法簡單實用，適用于各種網(wǎng)頁開發(fā)場景。