關於inline block的使用

2021-07-24 17:54:54 字數 422 閱讀 9005

在手機端移動網頁開發中我不喜歡使用浮動布局,所以使用一些其他的,比如inline-block;

問題:在inline-block使用過程中發現,長度有時候總是不受控制,比如70%+30%!=100%而自動換行的問題。

解決:發現兩個inline-block之間如果有留白,則就會出現上面的問題,

解決辦法一:標籤之間定格寫,取消空白,問題能解決,但是編碼縮排不好,不好看;

解決辦法二:在上層盒子中設定font-size:0;

解決辦法三:letter-spacing負值;

具體參考了網文:

拜拜了浮動布局-基於displayinline-block的列表布局/

補充: vertical-align屬性對於inline-block元素是有作用的!  理解為對行內元素有效(inline, inline-block)

關於inline block的相容測試

首先說下inline block inline block的區別 inline 行內元素顯示前後無換行符 block 塊級元素 inline block 行內塊元素 重點說下inline block這個屬性。經過測試當display inline block的時候,本身為塊元素的html標籤 比如 ...

關於inline block和float的對比

當把元素的display屬性設定為inline block時可以是元素變成行級元素 前後不換行 但是還可以設定一些塊級元素的屬性,從而實現元素的並列。當然將元素設為浮動也可以實現元素的並列 文件流 inline block不會脫離文件流,仍然在文件裡佔據正常的位置,但是float的元素會脫離文件流 ...

解決關於inline block元素換行問題

昨天群裡有人問個問題 為什麼button加了文字後,產生了對齊不一致的問題。原因在於baseline的對齊問題。其中裡面最後乙個例子講到了如何解決inline元素換行的問題。裡面說用注釋可以解決換行問題,我測試了下發現和注釋完全沒有關係。換行的原因在於div與div換行製表符產生的空隙,所以要避免換...