利用display:inline-block製作變長導航選單

admin發表於2017-03-19
inlineBloC

本章節介紹一下如何利用display:inline-block製作變長導航選單效果。

所謂的變長導航選單也就是，導航選單的內容長度是不固定的，比如可能是兩個字的，也可能是4個字的。

程式碼例項如下:

[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;
  margin-left:5px;
}
</style>
</head>  
<body>  
<div class="antzone">
  <a href="#">css教程</a>
  <a href="#">螞蟻部落二</a>
  <a href="#">螞蟻</a>
</div>
</body> 
</html>

上面的程式碼實現了我們的要求，display:inline-block從屬性值可以看出，它可以使元素兼顧塊級元素和內聯元素的一些特點，下面做一下簡單介紹，特點如下:

1.可以多個元素佔據一行，而非塊級元素那樣霸道。

2.如果塊級元素不設定寬度，那麼它的寬度是100%,也就是會填滿父元素，而內聯塊級元素則會根據內容進行自適應。

3.內聯塊級元素無法使用margin:0px auto使其居中顯示。

相關文章