這次給大家帶來怎樣使用li進行水平排列，使用li進行水平排列的注意事項有哪些，下面就是實戰案例，一起來看一下。

li水平排列

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;

}

• 我是第一個li
• 我是第二個li
• 我是第三個li

這樣會有一個問題給li的寬度設置為33%，三個li標簽的寬度居然超過了一行，有一點很明顯就是li標簽直接多了一點空白。

一、浮動

首先想到的是浮動，給li增加樣式float:left。

效果如上，這樣的方式，浮動會有一個問題，就是li的浮動使得ul的高度為0，解決這問題，有三種方法：

1、給ul增加height高度，但是這樣不能做到自適應。

2、清楚浮動的影響，在最后的li標簽后面增加一個空的p，

(個人推薦，但是覺得代碼維護上也不是很好。)

3、對ul增加zoom屬性，貌似只適應與ie(我沒研究)。

二、將li標簽寫成一行

• 我是第一個li
• 我是第二個li
• 我是第三個li

很奇怪為什么這樣就正常了，暫時很難理解。

三、給ul增加樣式去掉li標簽之間空白

給ul增加font-size:0樣式可以去除li標簽之間的空白。這樣有點需要注意的就是需要重新設置li標簽的字體大小。

相信看了本文案例你已經掌握了方法，更多精彩請關注jquery中文網其它相關文章！

推薦閱讀：

怎樣使用javascript Date Format方法

如何使用Zepto tap事件的穿透與點透(附代碼)

總結

以上是生活随笔為你收集整理的html li内部水平排列,怎样使用li进行水平排列的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。