在網頁設計中,我們有時候需要對無序列表進行排版,這時候就可以使用CSS中的li兩端對齊。li兩端對齊,是指將列表項的內容分布到整個寬度上,使得每個列表項的內容看起來都更加整齊。下面我們來具體介紹一下如何實現li兩端對齊。
ul { list-style: none; /*取消默認樣式*/ padding: 0; /*取消默認內邊距*/ margin: 0; /*取消默認外邊距*/ text-align: justify; /*將列表項的內容分布到整個寬度上*/ } li { display: inline-block; /*將列表項變為行內塊元素*/ width: 19%; /*設置列表項的寬度*/ margin-right: -4px; /*給每個列表項添加一個負的右側外邊距,使得每兩個列表項之間沒有間隔*/ text-align: left; /*將列表項的內容靠左對齊*/ } li::after { content: ""; /*偽元素,用于填充剩余的空白*/ display: inline-block; width: 100%; /*填充整個剩余空間*/ }
以上就是實現li兩端對齊的CSS代碼。需要注意的是,該方法需要指定每個列表項的寬度,因此在制作響應式網頁時需要根據不同屏幕尺寸進行調整。
上一篇css3圓形印章
下一篇css li前邊加圓點