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 標簽轉換成行內塊標簽,以達到橫向水平排列的效果。