li的水平排列问题

来源：互联网发布：ubuntu查看硬盘大小编辑：程序博客网时间：2024/06/05 08:22

涅槃总是痛苦的，什么都得重新开始。

最近在开始转前端，学习css。在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>