当前位置：首页 > 行业动态 > 正文

html如何让li平均分布

admin
行业动态
2024-04-08
3673

在HTML中，要让li元素平均分布，可以使用CSS的Flexbox布局或者Grid布局，这两种布局方式都可以实现元素的自动排列和对齐，下面分别介绍这两种方法的实现步骤。

1、使用Flexbox布局

Flexbox布局是一种一维的布局模型，可以轻松地实现元素的对齐、排序和分配空间，要使用Flexbox布局，需要将父元素的display属性设置为flex。

步骤如下：

(1) 创建一个HTML文件，添加一个ul元素作为容器，然后在其中添加多个li元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>Flexbox布局示例</title>
    <style>
        ul {
            display: flex;
            justifycontent: spacebetween;
        }
        li {
            width: 100px;
            height: 100px;
            backgroundcolor: lightblue;
            marginright: 10px;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

(2) 在style标签中，将ul元素的display属性设置为flex，这样ul元素就变成了一个flex容器，然后设置justifycontent属性为spacebetween，这样li元素就会在主轴上均匀分布。

(3) 为了看到效果，可以给每个li元素设置一个背景颜色，并设置一定的宽度和高度，为了让相邻的li元素之间有一定的间距，可以设置marginright属性。

2、使用Grid布局

Grid布局是一种二维的布局模型，可以轻松地实现元素的对齐、排序和分配空间，要使用Grid布局，需要将父元素的display属性设置为grid，并设置gridtemplatecolumns和gridgap属性。

步骤如下：

(1) 创建一个HTML文件，添加一个ul元素作为容器，然后在其中添加多个li元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>Grid布局示例</title>
    <style>
        ul {
            display: grid;
            gridtemplatecolumns: repeat(autofill, minmax(100px, 1fr));
            gridgap: 10px;
        }
        li {
            backgroundcolor: lightblue;
            padding: 20px;
            textalign: center;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

(2) 在style标签中，将ul元素的display属性设置为grid，这样ul元素就变成了一个grid容器，然后设置gridtemplatecolumns属性为repeat(autofill, minmax(100px, 1fr))，这样li元素就会在网格中均匀分布，minmax(100px, 1fr)表示每个网格的最小宽度为100px，最大宽度为可用空间的等份，gridgap属性用于设置网格之间的间距。

(3) 为了看到效果，可以给每个li元素设置一个背景颜色，并设置一定的内边距和文本对齐方式。