怎樣使用li進行水平排列
- php中世界最好的语言原創
- 2018-06-04 11:38:4010613瀏覽
這次帶給大家怎樣使用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，
（個人推薦，但是覺得代碼維護上也不是很好。）
3、對ul增加zoom屬性，看起來只適應與ie（我沒研究）。
二、將li標籤寫成一行
< ;ul>
很奇怪為什麼這樣就正常了，暫時很難理解。
三、為ul增加樣式去掉li標籤之間空白
#為ul增加font-size:0樣式可以去除li標籤之間的空白。這樣有點要注意的就是需要重新設定li標籤的字體大小。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是怎樣使用li進行水平排列的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：常用的程式碼整理匯總下一篇：常用的程式碼整理匯總