html - 带有子弹的水平li不会在外块上都清除

Question

我一直在努力为无序列表工作获取一组水平项目符号。最后一个问题是下面的段落在 ul 的末尾流动。

这是一个显示问题的 jsFiddle：http: //jsfiddle.net/jFfTt/

CSS：

ul.list-disc-horizontal {
  display: block; 
  width: 100%;
  float: none;
  clear: both;
}
ul.list-disc-horizontal li {
  list-style-type: disc;
  float:left;
  padding: 10px 15px 10px 0px;
}

的HTML：

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisi neque, sodales at pretium a, semper ac lacus. Etiam posuere lacus vehicula tortor volutpat varius. Donec pulvinar tincidunt metus nec fa hendrerit tincidunt. </p>

<ul class="list-disc-horizontal">
<li>Sed at placerat</li>
<li>Donec pulvinar tincidunt</li>
<li>Nullam ultricies</li>
<li>Proin tincidunt</li>
</ul>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisi neque, sodales at pretium a, semper ac lacus. Etiam posuere lacus vehicula tortor volutpat varius. Donec pulvinar tincidunt metus nec faucibus. Sed sed laoreet est. Quisque ut vehicula metus. Fusce porttitor turpis id mo hendrerit tincidunt. </p>

Answer 1

您可以使用 CSS:after伪类来清除浮动来解决此问题。

添加以下 CSS 行：

ul.list-disc-horizo​​ntal:after {
    内容：'';
    显示：块；
    明确：两者；
}

jsFiddle 链接：http: //jsfiddle.net/ddmoore/FGbFg/