開發中可能會遇到:一連串的inline-block
元素在格式化HTML 之後會出現間隔。
舉個栗子:
<nav>
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
</nav>
複製程式碼
nav a {
display: inline-block;
padding: 5px;
background: red;
}
複製程式碼
將在頁面上顯示:
往往我們需要的是每個元素拼接連在一起。像導航欄這種,我們就要避免不能點選的空格出現。
這不是一個bug(我不認為是)。它僅僅是讓元素在一條線上如何顯示的習慣。正確的書寫不就是單詞之間應該有空格的嗎?而inline-block
元素之間的空格就像兩個單詞之間的空格。這也不是說規範不能更新,關於取消兩個inline-block
元素之間的空格,但我確定這幾乎是不可能發生的事。
下面是一些能避免空格讓元素緊連在一起顯示的方法:
移除空格
之所以顯示時看到空格是因為本來就有空格在兩個元素之間(換行和一些tabs都會視為空格,它們僅僅是讓結構更加清晰)。從HTML結構入手可以解決這問題,下面是一些處理的技巧:
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
複製程式碼
或者,
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
複製程式碼
又或者添是加註釋的方式,
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
複製程式碼
設定margin值為負值
可以通過設定負值的margin讓元素回退將空格位置佔滿(具體數值需要根據父元素的字型大小來調整)。不過這種方式在比較老的IE瀏覽器(6 & 7)中會有些問題,如果你不需要考慮那些瀏覽器,就可以用這種方法避免顯示的空格,又能保持清晰的HTML結構。
nav a {
display: inline-block;
margin-right: -4px;
}
複製程式碼
跳過閉合標籤
在HTML5 下跳過閉合標籤依然能正常工作。雖然可以這麼做,但還是覺得奇怪。
<ul>
<li>one
<li>two
<li>three
</ul>
複製程式碼
設定font size的值為零
nav {
font-size: 0;
}
nav a {
font-size: 16px;
}
複製程式碼
Matt Stow 研究font-size: 0;
發現:這種做法在安卓中會出現一些問題。“Jellybean之前的版本並沒有移除間隔, Jellybean版本有一個bug,就是有時最後一個元素有一個比較小的間隔。”
另外需要注意,如果字型使用的單位是em
,被設定font size值為零的元素也會預設將它級聯的子元素的字型大小設定為零。不過使用rem
就可以避免這個問題,除此之外就是使用其他非級聯font-size
。
還有另外怪異的地方!Doug Stewart告訴我,如果使用了@font-face
並且使用了該方法,在afari 5.0.x字型將失去anti-aliasing
屬性。(測試栗子)(效果圖)
使用浮動代替
也許並不需要讓元素inline-block
化,也許可以通過設定浮動讓它們一個接一個。這允許你為它們設定它們的width、height、padding。但是不能像父元素是inline-block
那樣通過設定text-align: center;
讓它們居中。
使用flexbox代替
如果瀏覽器支援flexbox,並且你需要使````inline-block```元素居中,可以使用flexbox。它們雖然不是完全可互換的佈局模型,但是你可能會得到你需要的效果。