我正在使用生成无序列表的Wordpress插件,我可以使用CSS修改布局,但我无法编辑HTML(在最后li
之后插入clearfix div)。我正在尝试使用float:left;
从列表中创建一个网格,并尝试弄清楚如何将clearfix应用于列表项,以便ul
的高度不为0.任何想法?
HTML:
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
CSS:
li {
background:#000;
color:#fff;
display:inline;
float:left;
margin-bottom:20px;
margin-right:3%;
overflow:hidden;
position:relative;
width:30%;
}
答案 0 :(得分:1)
这应该使ul包含所有浮动的孩子,并清除修复:
ul {
overflow: auto;
}