gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 12:18:56 27 4
gpt4 key购买 nike

我一直在努力为无序列表设置一组水平元素符号。最后一个问题是下面的段落在 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>

最佳答案

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

添加以下 CSS 行:

ul.list-disc-horizontal:after {    content:'';    display:block;    clear: both;}

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

关于html - 带有子弹的水平 li 不会在外部 block 上清除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18995094/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com