html怎么使ul里的每个li都按一定间隔排列
时间: 2023-11-28 13:48:27 浏览: 65
css控制UL LI 的样式详解(推荐)
5星 · 资源好评率100%
你可以为 `ul` 元素设置一个 `padding` 值来控制每个 `li` 之间的间距,也可以使用 `margin` 值来控制 `li` 之间的间距。以下是两种方式的示例:
1. 使用 `padding` 控制间距:
```html
<ul style="padding: 0 20px;">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
```
上述代码中的 `padding: 0 20px;` 表示给 `ul` 元素的左右两侧都添加了 20px 的内边距,从而实现了每个 `li` 之间的间隔。
2. 使用 `margin` 控制间距:
```html
<style>
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin-bottom: 10px;
}
</style>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
```
上述代码中,我们先为 `ul` 元素设置了 `margin: 0; padding: 0; list-style: none;`,来去除默认的外边距、内边距和列表标记。然后为 `li` 元素设置了 `margin-bottom: 10px;`,表示每个 `li` 之间的间隔为 10px。
阅读全文