使用 CSS 让多个 li 标签横排显示

Adobe Dreamweaver，简称"DW"，中文名称"梦想编织者"，最初为美国MACROMEDIA公司开发[1]，2005年被Adobe公司收购。在日常的网页制作中，经常会遇到需要将多个列表项(li)横向排列的情况。下面我们一起学习如何使用 CSS 实现这个效果。

步骤一：新建 HTML 页面

利用 Dreamweaver，新建一个 HTML 页面。在 body 标签内输入以下基础代码:

```html

• 列表项 1
• 列表项 2
• 列表项 3
• 列表项 4

```

此时，默认情况下列表项会垂直排列。

步骤二：设置 CSS 样式

接下来，我们需要编辑 li 标签的 CSS 样式。在 style 标签内添加以下代码:

```css

ul li {

float: left;

list-style: none;

}

```

- `float: left;` 可以让列表项水平排列。

- `list-style: none;` 可以去除列表前的默认小圆点。

至此，多个 li 标签就可以横排显示了。

最终效果

通过以上步骤，我们成功地实现了将多个 li 标签横排显示的效果。这种方法简单实用，适用于各种网页开发场景。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。