html - Force margin to use all width -
i need these boxes in example placed same size out of each other on same line. how possible make? also, if resize window , 1 box drops down, in center in start of example.
<div id='wrapper'> <ul> <li> </li> <li> </li> </ul> </div>
edit:
first, suggest using div
s instead of <ul>
, <li>
otherwise have reset styles on them (for example, chrome adds -webkit-margin-before/after
, other css properties can mess layout).
fiddle divs
.
if need keep html markup, here
fiddle taht works in 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%; }
Comments
Post a Comment