要使多個塊級元素並行顯示,可使用float或者inline-block進行處理
使用inline-block會出現元素之間的間隙
<
div
class
="demo"
>
<
p>我是乙個span
p>
<
p>我是乙個span
p>
<
p>我是乙個span
p>
<
p>我是乙個span
p>
div>
.demo span
如圖:
*間隙是由換行或者回車導致的,所以將標籤**都寫同一行即可解決。不過這個方法不靠譜,因為space是由換行或回車所產生空白符所致,所以在其父元素設定font-size:0,如元素內有文字標籤需重寫font-size。
.demo
.demo span
如圖:
注釋:如需對低版本相容還得進一步處理
更多專業前端知識,請上
【猿2048】www.mk2048.com
去掉inline block元素間隙
目錄 1 標籤寫在一行,移除標籤間的空格 2 利用html注釋標籤 3 在父容器上使用font size 0 可以消除間隙 做頁面時,如果用到inline block元素來布局,就無可避免都會遇到乙個問題,就是inline block元素之間的間隙。這些間隙會導致一些布局上的問題,需要把間隙去掉。我...
去掉inline block元素間隙的幾種方法
最近做頁面時,經常會用到inline block元素來布局,但無可避免都會遇到乙個問題,就是inline block元素之間的間隙。這些間隙會導致一些布局上的問題,需要把間隙去掉。對於inline block元素及去掉間隙的方法,在這裡做乙個簡單的總結。1 標籤寫在一行,移除標籤間的空格 我是乙個s...
inline block元素間隙產生及去除方法
當我們把元素屬性display設定成inline block時,元素之間就會產生間隙 效果如下 當我們把元素ul 下面的li放在同一行的時候你會驚奇的發現間隙消失了ab 所以我們可以認為元素的間隙是由於 回車 或者換行所導致的,但是如果我們為了消除間隙把元素都寫在一行的話未免太不美觀了,而且對於下乙...