怎样使用li进行水平排列-木庄网络博客

本文摘自PHP中文网，作者php中世界最好的语言，侵删。

这次给大家带来怎样使用li进行水平排列，使用li进行水平排列的注意事项有哪些，下面就是实战案例，一起来看一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>li水平排列</title>
    <style>
    html{
        font-size: 20px;
    }
    @media only screen and (min-width: 320px){
    html{font-size: 20px !important;}
    }
    @media only screen and (min-width: 350px){
        html{font-size: 22.5px !important;}
    }
    @media only screen and (min-width: 365px){
        html{font-size: 23px !important;}
    }
    @media only screen and (min-width: 375px){
        html{font-size: 23.5px !important;}
    }
    @media only screen and (min-width: 390px){
        html{font-size: 24.5px !important;}
    }
    @media only screen and (min-width: 400px){
        html{font-size: 25px !important;}
    }
    @media only screen and (min-width: 428px){
        html{font-size: 26.8px !important;}
    }
    @media only screen and (min-width: 432px){
        html{font-size: 27.4px !important;}
    }
    @media only screen and (min-width: 481px){
        html{font-size: 30px !important;}
    }
    @media only screen and (min-width: 569px){
        html{font-size: 35px !important;}
    }
    @media only screen and (min-width: 569px){
        html{font-size: 40px !important;}
    }
    body{
        margin: 0;
        padding: 0;
    }
    ul{
        width: 100%;
        margin: 0.3rem 0;
        padding:0.3rem 0;
        border-top:0.05rem solid #ccc;
        border-bottom: 0.05rem solid #ccc;
    }
    li{
        width: 33%;
        list-style-type: none;
        display:inline-block;
        font-size: 0.8rem;
        border-left: 0.05rem solid #ccc;
        text-align: center;
    }
    </style>
</head>
<body>
    <ul>
        <li>我是第一个li</li>
        <li>我是第二个li</li>
        <li>我是第三个li</li>
    </ul> 
</body>
</html>