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

昨天群裡有人問個問題：為什麼button加了文字後，產生了對齊不一致的問題。

原因在於baseline的對齊問題。

其中裡面最後乙個例子講到了如何解決inline元素換行的問題。

裡面說用注釋可以解決換行問題，我測試了下發現和注釋完全沒有關係。

換行的原因在於div與div換行製表符產生的空隙，所以要避免換行的話，那就讓div和div挨著一起不要換行，或者設定容器font-size為0，因為製表符的大小受font-size影響。

首先是按照它說的來，是這樣的。

doctype html

>
<
html
>
<
head
>
<
title
>test
title
>
<
style 
type
="text/css"
>
*#container
.box
.half 
.left
.right
style
>
head
>
<
body
>
<
div 
id="container"
>
<
div 
id="test1"
class
="box"
>
<
div 
class
="half left"
>50% wide
div>
<
div 
class
="half right"
>50% wide... and in next line
div>
div>
<
div 
id="test2"
class
="box"
>
<
div 
class
="half left"
>50% wide
div>
<
div 
class
="half right"
>50% wide
div>
div>
div>
body
>
html
>

可以看到，有沒有注釋都會換行，那麼我們測試下div與div挨著一起

<

div 
id="container"
>
<
div 
id="test1"
class
="box"
>
<
div 
class
="half left"
>50% wide
div><
div 
class
="half right"
>50% wide... and in next line
div>
div>
<
div 
id="test2"
class
="box"
>
<
div 
class
="half left"
>50% wide
div>
<
div 
class
="half right"
>50% wide
div>
div>
div>

可以看到當div與div挨著一起的時候，也就是沒有了換行的製表符，因此沒有了空隙，就可以併排一行了。

此外，也可以設定父容器font-size為0也可以達到這種效果。

.box

<
div 
id="container"
>
<
div 
id="test1"
class
="box"
>
<
div 
class
="half left"
>50% wide
div>
<
div 
class
="half right"
>50% wide... and in next line
div>
div>
<
div 
id="test2"
class
="box"
>
<
div 
class
="half left"
>50% wide
div>
<
div 
class
="half right"
>50% wide
div>
div>
div>

關於inline block的使用

在手機端移動網頁開發中我不喜歡使用浮動布局，所以使用一些其他的，比如inline block 問題 在inline block使用過程中發現，長度有時候總是不受控制，比如70 30 100 而自動換行的問題。解決 發現兩個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的元素會脫離文件流 ...