清除列表项而无法编辑HTML?

时间:2015-08-01 18:10:20

标签: css html-lists clearfix

我正在使用生成无序列表的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%;
}

JSFiddle

1 个答案:

答案 0 :(得分:1)

这应该使ul包含所有浮动的孩子,并清除修复:

ul {
overflow: auto;
}