在无法编辑 HTML 的情况下清除列表项？答案

【问题标题】：Clearing list items without being able to edit the HTML?在无法编辑 HTML 的情况下清除列表项？
【发布时间】：2015-10-24 05:27:29
【问题描述】：

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

【问题讨论】：

标签： css html-lists clearfix

【解决方案1】：

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

ul {
overflow: auto;
}

【讨论】：