强制边距使用所有宽度

时间:2014-04-14 11:43:15

标签: html css list

JS Fiddle example

我需要在示例中将这些框放在同一行上相同的大小。怎么可能做到? 此外,如果您调整窗口大小并且一个框下降,那么它将位于中心,就像现在在示例的开头一样。

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

编辑: First

Second

Third

1 个答案:

答案 0 :(得分:2)

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

Fiddledivs

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

FIDDLE taht适用于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%;
}