我需要在示例中将这些框放在同一行上相同的大小。怎么可能做到? 此外,如果您调整窗口大小并且一个框下降,那么它将位于中心,就像现在在示例的开头一样。
<div id='wrapper'>
<ul>
<li>
</li>
<li>
</li>
</ul>
</div>
编辑:
答案 0 :(得分:2)
首先,我建议使用div
而不是<ul>
和<li>
,否则你必须重置它们的样式(例如,chrome添加-webkit-margin-before/after
和其他css属性可能会弄乱您的布局)。
Fiddle与divs
。
如果你真的需要保留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%;
}