css導航欄之間有空隙怎麼解決

antzone發表於2017-03-15
CSS

製作導航欄的時候，可能會出現這樣的現象，那就是導航欄的欄目之間存在空隙這種問題。

當然存在空隙現象的原因有多種，但是比較常見的一種就是應用display:inline-block之後出現空格現象。

先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
.antzone a{
  display:inline-block;
  padding:0.5em 1em;
  background-color:#cad5eb;
  text-decoration:none;
}
</style>
</head>  
<body>  
<div class="antzone">
  <a href="#">螞蟻部落一</a>
  <a href="#">螞蟻部落二</a>
  <a href="#">螞蟻部落三</a>
</div>
</body> 
</html>

看上面的程式碼，導航欄目之間會出現空格現象，之所以會出現這樣的問題就是因為a元素之間的空格或者換行導致的。解決此問題的方式有很多中，我們的要求是解決問題，只要掌握其中的一種方式即可。

最簡單的方式自然是消除元素之間的空格，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<a href="#">螞蟻部落一</a><a href="#">螞蟻部落二</a><a href="#">螞蟻部落三</a>

但是這樣的格式閱讀性實在太差了，比較常用的一種方式如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
.antzone{font-size:0px;}
.antzone a{
  display:inline-block;
  padding:0.5em 1em;
  background-color:#cad5eb;
  text-decoration:none;
  font-size:16px;
}
</style>
</head>  
<body>  
<div class="antzone">
  <a href="#">螞蟻部落一</a>
  <a href="#">螞蟻部落二</a>
  <a href="#">螞蟻部落三</a>
</div>
</body> 
</html>

設定連結a所在的元素的字型大小為0px，然後再單獨給連結a設定字型大小即可。

相關文章