CSS overflow : list in a div
I have an image gallery and I dont want give an extra class to third list item:
<div class="row">
<ul class="rowUl">
<li>ssss</li>
<li>ssss</li>
<li>ssss</li>
</ul>
</div>
and开发者_JS百科 css
.row {
width: 620px;
clear: both;
overflow: hidden;
}
.rowUl {
width: 645px;
float: left;
}
.rowUl li {
width: 220px;
float: left;
}
but the third list item drop in other row. How can I solve this without extra class?
220 * 3 = 660
,
rowUL = 645
thats 15 extra pixels pushing the floated div down.
Solutions:
Make rowUL width 660
, make row width 660
OR:
make the rowUL li width 215
Try increasing the width
from 645px
to a greater value in .rowUl
if feasible in your case.
You have 3 floated LI elements, each 220px wide. 3*220 = 660, but the containing element's width is only 645px, so the third one cannot fit in next to the 2nd one and falls to another row below the first one. If you want them all in one row, set .rowUl's width to 660px.
Also, I don't know if you're using some kind of CSS reset - if you don't, be aware of the fact that default margins and paddings of UL and LI elements can also affect this. You need to set them to 0 if you want to make sure that they don't.
You have exceeded width limit of inline elements by 645px within 660px (each 220px for all three elements)
You can do it by increasing width of outer elements more than 660px
Hope this helps
Myra
精彩评论