li橫向排列是Web前端開(kāi)發(fā)中常見(jiàn)的布局方式之一,本文將從多個(gè)方面介紹如何實(shí)現(xiàn)li橫向排列。
一、使用float屬性
使用float屬性可以讓li元素橫向排列。
ul li { float: left; }
但是需要注意的是,需要清除浮動(dòng)才能保證父元素的高度不塌陷,可以使用clearfix方法。
.clearfix:after { content: ""; display: block; clear: both; } ul { list-style: none; margin: 0; padding: 0; } ul li { float: left; width: 100px; height: 100px; border: 1px solid #ccc; margin-right: 20px; }
二、使用display: flex
使用display: flex和flex-wrap: nowrap可以讓li元素橫向排列。
ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; } ul li { width: 100px; height: 100px; border: 1px solid #ccc; margin-right: 20px; }
需要注意的是,如果li元素寬度總和大于父元素寬度時(shí),li元素會(huì)換行,需要設(shè)置flex-wrap: nowrap來(lái)禁止換行。
三、使用inline-block
使用display: inline-block可以讓li元素橫向排列。
ul { list-style: none; margin: 0; padding: 0; font-size: 0; letter-spacing: -4px; word-spacing: -4px; } ul li { display: inline-block; width: 100px; height: 100px; border: 1px solid #ccc; margin-right: 20px; font-size: 16px; letter-spacing: normal; word-spacing: normal; }
需要注意的是,需要設(shè)置父元素的font-size和letter-spacing、word-spacing來(lái)解決空格問(wèn)題。
四、使用table布局
使用table布局也可以實(shí)現(xiàn)li元素橫向排列。
ul { list-style: none; margin: 0; padding: 0; display: table; table-layout: fixed; } ul li { display: table-cell; width: 100px; height: 100px; border: 1px solid #ccc; margin-right: 20px; }
五、使用grid布局
使用grid布局也可以實(shí)現(xiàn)li元素橫向排列。
ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-gap: 20px; } ul li { width: 100%; height: 100px; border: 1px solid #ccc; }
使用grid-template-columns和grid-gap可以設(shè)置列數(shù)和列之間的間距。