html页面中的多个连续的<li>标签在默认的情况下是竖向排列的,不过我们可以设置 li 标签的 CSS 样式,来使一个 ul 标签中的所有 li 标签都横向排列。

多个 html 中 li 标签默认竖向排列

html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        #pic_list li{
            width:40px;
            height:40px;
            margin:3px;
            background:red;
            list-style: none;
        }
    </style>
</head>
<body>
    <ul id="pic_list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

运行结果:

通过下面,可以发现,在默认情况下,<ul>中所有的<li>标签都是竖向排列的

li标签默认竖向排列

li标签默认竖向排列

使用 css float 属性,使 li 标签横向排列

css代码改动下

#pic_list li{
    width:40px;
    height:40px;
    margin:3px;
    background:red;
    list-style: none;
    /*加个一个 float 属性*/
    float: left;
}

运行结果:

li标签水平横向排列

li标签水平横向排列

PS:由于 li 是块元素,可以使用 float: left; 让所有的 li 标签向左浮动,达到水平横向排行的效果

使用 css display 属性,使 li 标签水平排列

CSS代码修改如下:

#pic_list li{
    width:40px;
    height:40px;
    margin:3px;
    background:red;
    list-style: none;
    /*加个一个 display 属性*/
    display: inline-block;
}

PS: "display: inline-block",可以将 li 标签转换成行内块标签,以达到横向水平排列的效果。