涅槃總是痛苦的，什麼都得重新開始。
最近在開始轉前端，學習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>
這樣會有一個問題給li的寬度設置爲33%，三個li標籤的寬度居然超過了一行，有一點很明顯就是li標籤直接多了一點空白。
一、浮動
首先想到的是浮動，給li增加樣式float:left。
效果如上，這樣的方式，浮動會有一個問題，就是li的浮動使得ul的高度爲0，解決這問題，有三種方法：
1、給ul增加height高度，但是這樣不能做到自適應。
2、清楚浮動的影響，在最後的li標籤後面增加一個空的div，<div style="clear:both;">（個人推薦，但是覺得代碼維護上也不是很好。）
3、對ul增加zoom屬性，貌似只適應與ie（我沒研究）。
二、將li標籤寫成一行
<ul>
<li>我是第一個li</li><li>我是第二個li</li><li>我是第三個li</li>
</ul>
很奇怪爲什麼這樣就正常了，暫時很難理解。
三、給ul增加樣式去掉li標籤之間空白
給ul增加font-size:0樣式可以去除li標籤之間的空白。這樣有點需要注意的就是需要重新設置li標籤的字體大小。
總結下：首先給li標籤增加樣式display:inline-block，讓它水平排列然後解決兼容問題。個人不推薦是否float的方法來解決問題，覺得第二種和第三種比較好。