css貼邊均勻等分列表

antzone發表於2017-04-02
CSS

關於兩遍貼壁均勻等分列表的應用這裡就不多介紹了，因為非常的廣泛。

實現此效果的方式有多種，下面就通過程式碼例項分享一下其中的一種。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style>
* {
  margin:0px;
  padding:0px;
}
.container{
  margin:50px auto;
  width:625px;
  height:220px;
  background:#DEF3FF;
  overflow:hidden;
}
.container ul{
  width:700px;
  margin-left:-75px;
  list-style:none;
  overflow:hidden;
}
.container li{
  width:100px;
  height:100px;
  margin-left:75px;
  margin-bottom:20px;
  float:left;
  background:#ccc;
}
</style>
</head>
<body>
<div class="container">
  <ul>
    <li class="pull-left"></li>
    <li class="pull-left"></li>
    <li class="pull-left"></li>
    <li class="pull-left"></li>
    <li class="pull-left"></li>
    <li class="pull-left"></li>
    <li class="pull-left"></li>
    <li class="pull-left"></li>
  </ul>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，實現的原理非常的簡單，下面做一下簡單介紹。

實現原理:

（1）.實現目的是灰色框兩端貼壁，中間均勻分割。

（2）.內一行的內容尺寸是4x100+75x3=625，因為第一個margin-left是不需要的，否則就不會貼壁。

（3）.ul元素設定margin-left:-75px，這樣就把第一個margin-left隱藏了,因為最外層的div採用overflow:hidden。

如果使用flex彈性佈局那麼就輕鬆很多，具體可以參閱css3 flex彈性佈局實現貼邊均勻等分列表一章節。

相關文章