gpt4 book ai didi

html - 为什么段落出现在关闭列表的左侧?

转载 作者:太空宇宙 更新时间:2023-11-03 20:44:30 27 4
gpt4 key购买 nike

我创建了一个非常简单的 HTML 页面,其中包含一个列表和一个段落。问题是该段落出现在列表的右侧。如果我创建另一个段落,它会被正确放置。我希望第一个以相同的方式显示。

<body>
<ul>
<li>(...)
<li>(...)
<li>(...)
<li>(...)
</ul>
<p>This text is to the right of the list.</p>
<p>This text is in a new line and is left-aligned.</p>
</body>

我没有在我的 CSS 文件中的任何地方引用段落,这是与列表相关的部分:

ul {
list-style: none;
margin 0;
}

li {
float: left;
}

最佳答案

添加这个

ul:after{
content:'';
display:table;
clear:both;
}

DEMO

每当您使用 float 时都必须这样做。最佳实践是像这样创建一个类 -->

.clearfix:after{
content:'';
display:table;
clear:both;
}

如果子项是 float 的,则将此类添加到父 block 中。始终尝试遵循此步骤。

有关更详细的说明,请参阅此链接 --> http://www.impressivewebs.com/clearing-floats-why-necessary/

关于html - 为什么段落出现在关闭列表的左侧?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22733411/

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