CSS中的li標(biāo)簽是列表標(biāo)簽,在網(wǎng)站設(shè)計(jì)中經(jīng)常使用到,但是默認(rèn)情況下,li標(biāo)簽是左對(duì)齊的。那么如何讓li標(biāo)簽右對(duì)齊呢?下面我們來(lái)看一下具體實(shí)現(xiàn):
ul { list-style:none; /*去掉默認(rèn)樣式*/ padding:0; /*去掉默認(rèn)內(nèi)邊距*/ } li { float:right; }
通過給li標(biāo)簽設(shè)置浮動(dòng)值為右側(cè),可以讓列表項(xiàng)向右對(duì)齊。但是需要注意的是,li標(biāo)簽的寬度必須被限制,否則會(huì)出現(xiàn)多個(gè)列表項(xiàng)堆疊在一起的情況。我們可以通過設(shè)置寬度或者最大寬度來(lái)保證每個(gè)列表項(xiàng)都能夠正常排列。
li { float:right; width:100px; /* 或者 */ max-width:20%; }
除此之外,我們還可以設(shè)置li標(biāo)簽的文本方向?yàn)閺挠蚁蜃螅@樣可以保證文本內(nèi)容不會(huì)被截?cái)唷?/p>
li { float:right; direction:rtl; /*從右向左*/ text-align:left; /*左對(duì)齊文本*/ }
使用以上任意一種方法,都可以讓列表項(xiàng)向右對(duì)齊,同時(shí)保持良好的排列效果。具體應(yīng)該根據(jù)實(shí)際情況來(lái)選擇不同的實(shí)現(xiàn)方式。