0

順序付けられていないリストの水平方向の箇条書きのセットを機能させるのに苦労しています。最後の問題は、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>
4

1 に答える 1

0

これは、CSS:after疑似クラスを使用してフロートをクリアすることで解決できます。

次の CSS 行を追加します。

ul.list-disc-horizo​​ntal:after {
    コンテンツ：'';
    表示ブロック;
    クリア: 両方;
}

jsFiddle リンク: http://jsfiddle.net/ddmoore/FGbFg/

于 2013-09-25T02:20:22.837 に答える