html - 强制边距使用所有宽度

Question

JS Fiddle example

示例中，我需要将这些框彼此放置在同一行上，大小相同。怎么可能做出来？此外，如果您调整窗口大小并且有一个框掉落，那么它将位于中心，就像现在在示例的开头一样。

<div id='wrapper'>
    <ul>
        <li>
        </li>
        <li>
        </li>
    </ul>
</div>

编辑:

Answer 1

首先，我建议使用 div s 而不是 <ul>和 <li>否则你将不得不重置它们的样式(例如，chrome 添加了 -webkit-margin-before/after 和其他可能弄乱你的布局的 css 属性)。

Fiddle与 divs .

如果你真的需要保留 HTML 标记，这里有一个

FIDDLE 可以在 chrome 中使用。

HTML:

<div id='wrapper'>
    <ul>
        <li><span></span>
        </li>
        <li><span></span>
        </li>
        <li><span></span>
        </li>
    </ul>
</div>

CSS:

html, body {
    width:100%;
    margin:0;
    overflow: hidden;
}
#wrapper {
    width: 100%;
    height: 220px;
    background-color: #000;
}
ul {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start:0;
}
ul > li {
    float:left;
    display:block;
    width:33.33%;
    height: 220px;
    list-style-type: none;
}
ul > li > span {
    background-color: red;
    display:block;
    margin:0 auto;
    width:200px;
    height:100%;
}