怎样使用li进行水平排列-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

怎样使用li进行水平排列

这次给大家带来怎样使用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>

登录后复制

这样会有一个问题给li的宽度设置为33%，三个li标签的宽度居然超过了一行，有一点很明显就是li标签直接多了一点空白。

一、浮动

首先想到的是浮动，给li增加样式float:left。

效果如上，这样的方式，浮动会有一个问题，就是li的浮动使得ul的高度为0，解决这问题，有三种方法：

1、给ul增加height高度，但是这样不能做到自适应。

2、清楚浮动的影响，在最后的li标签后面增加一个空的p，<p style="clear:both;">（个人推荐，但是觉得代码维护上也不是很好。）

3、对ul增加zoom属性，貌似只适应与ie（我没研究）。

二、将li标签写成一行

<ul><li>我是第一个li</li><li>我是第二个li</li><li>我是第三个li</li></ul>

很奇怪为什么这样就正常了，暂时很难理解。

三、给ul增加样式去掉li标签之间空白