CSS是網頁設計必不可少的一部分,其中關于li標簽上間距的處理也是經常會遇到的問題之一。在CSS中,li標簽通常用于列表項的顯示,但是如果樣式不加處理,多個li標簽將會緊密排列在一起,導致界面看起來比較擁擠。
ul { padding: 0; margin: 0; } li { list-style: none; padding: 10px; margin-bottom: 10px; background-color: #f5f5f5; }
如上所示,我們可以通過在li標簽上設置一個margin-bottom屬性,使li之間產生一定的間距。此外,為了保證列表整體布局的一致性,我們也常常會對ul標簽自身的padding和margin進行重置。
li { display: inline-block; margin-right: 10px; } li:last-child { margin-right: 0; }
另外,如果我們需要對li標簽進行橫向排列,也可以通過設置display屬性為inline-block來實現。如上述代碼所示,設置每一個li標簽之間的margin-right屬性為10px,并為最后一個li標簽單獨設置一個margin-right:0,以免出現多余的空白間距。
總之,通過CSS的設置,我們可以很方便地為li標簽添加間距,并優化網頁的整體布局。
上一篇css3圓角箭頭
下一篇css link無顏色