CSS中的ul和li標(biāo)簽是常用的列表標(biāo)簽，在網(wǎng)頁(yè)中常見(jiàn)的“導(dǎo)航欄”、“菜單”、“目錄”等都可以使用這兩個(gè)標(biāo)簽來(lái)實(shí)現(xiàn)。但是在實(shí)際應(yīng)用中，我們常常需要對(duì)顯示的行列進(jìn)行控制，比如要求每行只顯示3個(gè)選項(xiàng)，在此我們就可以使用CSS對(duì)ul和li標(biāo)簽進(jìn)行限定。

/*設(shè)置ul樣式*/
ul {
/*去除默認(rèn)樣式*/
list-style: none;
/*設(shè)置寬度*/
width: 600px;
/*設(shè)置最大高度，超出部分溢出*/
max-height: 250px;
overflow: hidden;
}
/*設(shè)置li樣式*/
li {
/*設(shè)置寬度*/
width:33.33%;
/*設(shè)置浮動(dòng)*/
float:left;
/*設(shè)置內(nèi)邊距*/
padding:10px;
/*設(shè)置邊框*/
border:1px solid #ccc;
/*調(diào)整盒子模型，使寬度和高度準(zhǔn)確*/
box-sizing:border-box;
}
/*清除浮動(dòng)*/
li:nth-child(3n+1) {
clear:left;
}

上面的代碼中，我們使用了CSS的float屬性將li標(biāo)簽左浮動(dòng)，這樣使得每個(gè)li標(biāo)簽都排列在同一行。同時(shí)，我們?cè)O(shè)置了每個(gè)li標(biāo)簽的寬度為33.33%，這樣三個(gè)li標(biāo)簽的寬度和剛好為100%。

我們還使用了clear屬性來(lái)清除li標(biāo)簽的浮動(dòng)，這樣就可以保證每行只顯示三個(gè)選項(xiàng)，而不會(huì)因?yàn)楦?dòng)而產(chǎn)生副作用。

通過(guò)上面的CSS代碼，我們可以輕松地控制ul和li標(biāo)簽的行列顯示，實(shí)現(xiàn)更加靈活多樣的網(wǎng)頁(yè)布局效果。