div內li標籤間距 li標籤的間距問題及編碼方式

2021-10-13 10:47:12 字數 857 閱讀 2568

新建乙個簡單的html測試檔案,下面來測試ul li標籤

example source code

測試一,定義css為如下**,效果如下

example source code

body

ulul li

ul li a

發現在ie5和ie5.5下左邊都產生了空白,並且在ie5下,li之間的行距產生空白,如下圖1

測試二,定義css為如下**,

example source code

body

ulul li

ul li a

和測試一相比,只是將width:120px;從ul的定義放置到li的定義,解決了ie5和ie5.5左邊產生空白的問題,而ie5的li之間的間距還是有,如下圖2

測試三,定義css為如下**,(最佳寫法)

example source code

body

ulul li

ul li a

和測試二比較,在li的定義中加上vertical-align: bottom;ie5下正常,li之間的空白行距消失了,取得各個瀏覽器的效果一樣,如下圖3

總結1.解決li在ie5下產生空白行距的方法:如果li定義了寬度,那麼需要在li裡面再定義vertical-align: bottom;

2.寬度最好不要定義在ul,定義在li或者ul外層的div裡面

3. 書寫li的最佳方式,li裡面要書寫高度和寬度,以及vertical-align: bottom;(for ie5/win bug),或者在ul外面加上一層div,並定義寬度,那麼在li裡面不用定義寬度和vertical-align: bottom;,也顯示正常(ie5下不會產生空白行距),不過高度還是要定義一下的。

div內li標籤間距 css怎樣讓li間距增大?

css 能夠對網頁中元素位置的排版進行畫素級精確控制,支援幾乎所有的字型字型大小樣式,擁有對網頁物件和模型樣式編輯的能力。css可以使用margin簡寫屬性設定li標籤的外邊距來使li間距增大,margin簡寫屬性在乙個宣告中設定所有外邊距屬性。該屬性可以有1到4個值。li標籤預設間距如下 效果如下...

div內li標籤間距 div內文字之間間距設定方法

div內字與字間距是否能夠用css 實現?答案 可應用css實現div字間距布局。css字間距的單詞 letter spacing 1 語法 letter spacing 3px 設定裝備擺設物件字間距為3px隔絕距離。2 對悉數div設定裝備擺設匹敵字間距 div如許即設定裝備擺設html中全部d...

li標籤間距引起樣式差異

最近在使用bootstrap的輪播圖外掛程式carousel時,發現頁面樣式與外掛程式文件樣式不一樣,主要是多個li元素間距不同,對比如下圖 我實現的頁面 外掛程式文件提供的頁面 可以看到,我實現的頁面中li間距過短。對兩個頁面仔細對比,發現css沒有區別,沒辦法只能自己加了乙個3px的外邊距,效果...