inline block引起的空白間隙的問題

2022-07-23 05:03:15 字數 1345 閱讀 2091

<

div

class

="card-con"

>

<

div

class

="card-shop-item"

>

div>

<

div

class

="card-shop-item"

>

div>

<

div

class

="card-shop-item"

>

div>

<

div

class

="card-shop-item"

>

div>

div>

例如上述例子,外層card-con的div寬度為400px,內層div格式改為inline-block,寬度為100px,但會發生換行,無法達到預期效果。

原因:inline-block會引起元素和元素之間幾個畫素的間隙(具體間隙大小取決於字型大小)。造成空白間隙的原因是在標籤和標籤之間使用了空格或換行符。 因為空白字元也是字元,也會引用css樣式。

解決方法1:既然空白間隙是由於換行或空格引起,那麼消除換行符就解決了

但是,這個方法在chrome瀏覽器下沒有效果,在ie6/7下殘留1畫素間隙。

html結構:

<

ul>

<

li>111

li><

li>222

li><

li>333

li><

li>444

li><

li>555

li>

ul>

解決方法2:設定父元素的font-size為0,在子元素重新設定字型大小

ie8,firefox,chrome 和 opera 瀏覽器下已經沒有問題了,但是在 低版本safari 瀏覽器下還是有問題。

*ulli

解決辦法3: 利用負margin-left(不推薦,具體負margin多少取決於字型的大小)

*ulli

解決辦法4 :去掉閉合標籤

<

ul>

<

li>

111

<

li>

222

<

li>

333

<

li>

444

<

li>

555ul

>

不符合w3c標準

NULL空記錄引起的查詢錯誤

我們執行一下 錯誤原因 原來是因為表sbqiye裡有空記錄,很容易讓人想到,是我們在把excel表匯入的時候導主了空記錄,這樣的空記錄,一般在表的最後面,我們開啟表sbqiye,定位到最後一條記錄 果然有兩條空記錄,這是罪魁禍首,只要把這兩條空記錄刪除,再次執行第乙個圖中的命令,就能正確查出記錄了。...

寫錯equals方法引起的空指標異常

首發原文 http www.laozizhu.com view.jsp?articleid 60 情景上這樣的 我有乙個重寫了equals方法的類,該類原始碼如下。然後用一程式將此類多次迴圈put到hashmap中去,但每次put到1500次左右時,就會出現nullpointerexception。...

關於inline block的使用

在手機端移動網頁開發中我不喜歡使用浮動布局,所以使用一些其他的,比如inline block 問題 在inline block使用過程中發現,長度有時候總是不受控制,比如70 30 100 而自動換行的問題。解決 發現兩個inline block之間如果有留白,則就會出現上面的問題,解決辦法一 標籤...