css多個元素在容器內水平均勻分佈

admin發表於2017-04-07
CSS

在很多效果中都有這樣的應用，那就是元素能夠在容器中能夠水平均勻分佈。

下面就通過程式碼例項演示一下如何實現此功能，這裡就不考慮IE6-IE8這樣低版本瀏覽器。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin:0px;
  padding:0px;
}
ul {
  margin:0px auto;
  background:green;
  width:230px;
  height:50px;
}
ul li {
  list-style-type:none;
  width:50px;
  height:50px;
  float:left;
  margin-right:10px;
  background:#ccc;
}
li:nth-child(4) {
  margin-right:0px;
}
</style>
</head>
<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>
</html>

上面的程式碼實現了我們的要求，程式碼非常簡單，這裡不多介紹了。

:nth-child()可以參閱CSS E:nth-last-child(n)一章節。

使用彈性佈局可以更加輕鬆實現此功能，具體可以參閱css3的flex彈性佈局實現貼邊均勻等分列表一章節。

相關文章