今天在教我朋友寫前端的時後發現我們在 <ul> 底下所有的 <li> 做 inline-block 的時候會有奇怪的間距 (因為也不知道問題是 margin 還是 padding 還是 font-size 之類的...，但清掉還是一樣)。
問題是都已經 inline-block 而且寬度也除到剛好的百分比了，怎麼會有這種怪事...。
demo Source:
http://jsbin.com/juloyekinu/1/watch?html,css,output
http://jsbin.com/juloyekinu/1/
但我又不想用 float 解決，這樣還要用 clearfix 也不是方便哪裡去。後來找到了這篇
Fighting the Space Between Inline Block Elements Published April 21, 2012 by Chris Coyier ，當作解法，解法有幾種，我都不很喜歡... 最後還是挑了 Negative margin，當做最後的方法。
不知道大家有沒有什麼好建議，歡迎留言給我~ 謝謝!
更新:
後來找到一篇討論:
How to get rid of space between divs when display inline-block and stacked horizontally?
除了子層加 margin-left: -4px; 之外，可以用把父層的 font-size 設為 0 也可以。
哦.. 好不科學哦... css你... ><
問題是都已經 inline-block 而且寬度也除到剛好的百分比了，怎麼會有這種怪事...。
demo Source:
http://jsbin.com/juloyekinu/1/watch?html,css,output
http://jsbin.com/juloyekinu/1/
但我又不想用 float 解決，這樣還要用 clearfix 也不是方便哪裡去。後來找到了這篇
Fighting the Space Between Inline Block Elements Published April 21, 2012 by Chris Coyier ，當作解法，解法有幾種，我都不很喜歡... 最後還是挑了 Negative margin，當做最後的方法。
不知道大家有沒有什麼好建議，歡迎留言給我~ 謝謝!
更新:
後來找到一篇討論:
How to get rid of space between divs when display inline-block and stacked horizontally?
除了子層加 margin-left: -4px; 之外，可以用把父層的 font-size 設為 0 也可以。
哦.. 好不科學哦... css你... ><
看你的敘述，看不出來是什麼問題
回覆刪除哦哦抱歉，大概是沒有圖的關係吧..
刪除像 http://jsbin.com/pazimasica 這個是不符合我預期的狀況，就是子元素平均分配寬度 25% 且 inline-block，但卻沒有塞在同一行，預期是希望他們在同一行上。
jsbin: http://jsbin.com/juloyekinu/1/edit?html,css,output
在li 加上 float: left;
刪除就解決了
哦是啊 可是加 float 我就要清浮動，我其實是想盡量不用 float 啦 :P
刪除謝謝
http://jsbin.com/someha/1/edit?html,css,output
刪除直接看這個吧
外層用display:inline-flax;width:100%;
內層用display:inline;width:25%;
作者已經移除這則留言。
回覆刪除作者已經移除這則留言。
回覆刪除是</p>到<p>間的空白害的，所以如果妳把 font-size 設 0 會正常是因為空白就不會顯示了，如果妳不想設 font-size，那妳的 p 就不能換行縮排，要全部黏成一長條
回覆刪除了解 謝謝你
刪除XDD
不好意思，給妳留了一堆一樣的，手機那時候網路不順 ><"
回覆刪除而且我好像過太久才看到這篇文了xDDDDDD