先看代碼

html：

<div>
　　<ul>
　　　　<li></li>
　　　　<li></li>
　　　　<li></li>
　　　　<li></li>
　　</ul>
</div>

css：

ul,li{padding:0;margin:0;list-style: none;}
*{box-sizing:border-box;-moz-box-sizing:border-box;}/*css3寬度包含padding*/
div{margin:0 auto;width:1000px;}
ul{background-color: pink;overflow:hidden;}
li{padding:0 15px;width:25%;height:100px;float:left;background:rgba(100,100,100,.5);position: relative;}

css3中的的box-sizing:border-box將邊寬border和padding都計入裏25%的寬度內，

Internet Explorer、Opera 以及 Chrome 支持 box-sizing 屬性。

Firefox 支持替代的 -moz-box-sizing 屬性。w3c解釋

顯示的效果圖如下所示:

灰色代表div,紅色框區域代表ul,黃色代表li ,藍色代表li中的內容，

為了讓li中內容能在左右置頂，css如下設置：橙色表示添加的樣式

ul,li{padding:0;margin:0;list-style: none;}
*{box-sizing:border-box;}/*css3寬度包含padding*/
div{margin:0 auto; padding-right: 15px;padding-left: 15px;

效果如下所示：紅色表示內容可視區域

柵格系統原理