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

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

步驟一：新建 HTML 頁面

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

```html

• 列表項(xiàng) 1
• 列表項(xiàng) 2
• 列表項(xiàng) 3
• 列表項(xiàng) 4

```

此時(shí)，默認(rèn)情況下列表項(xiàng)會(huì)垂直排列。

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

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

```css

ul li {

float: left;

list-style: none;

}

```

- `float: left;` 可以讓列表項(xiàng)水平排列。

- `list-style: none;` 可以去除列表前的默認(rèn)小圓點(diǎn)。

至此，多個(gè) li 標(biāo)簽就可以橫排顯示了。

最終效果

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