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-horizontal:after {
    content:'';
    display:block;
    clear: both;
}

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

带子弹的水平li不会在外部块上清除

1 个答案: