Html 为什么段落出现在关闭列表的左侧？_Html_Css

Html 为什么段落出现在关闭列表的左侧？

html css

Html 为什么段落出现在关闭列表的左侧？,html,css,Html,Css,我创建了一个非常简单的HTML页面，其中有一个列表和一个段落。问题是该段出现在列表的右侧。如果我创建了另一个段落，它的位置就正确了。我希望第一个以同样的方式展示 <body> <ul> <li>(...) <li>(...) <li>(...) <li>(...) </ul> <p>This text is to the right of the list.

我创建了一个非常简单的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>

加上这个

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

无论何时使用浮动，都必须执行此操作。最佳实践是制作这样的类-->

如果子块是浮动的，则将该类添加到父块。始终尝试执行此步骤

有关详细说明，请参阅此链接-->

添加此链接

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

无论何时使用浮动，都必须执行此操作。最佳实践是制作这样的类-->

如果子块是浮动的，则将该类添加到父块。始终尝试执行此步骤

有关详细说明，请参阅此链接-->

不要使用

float:*如果您不知道浮动元素的作用<代码>浮动

将元素从正常流中取出。但是，您希望在单行上显示

li

，而不会松开其

显示：块属性。这正是显示的内容：内联块是用于（）的：
不要使用float:*如果您不知道浮动元素的作用<代码>浮动
将元素从正常流中取出。但是，您希望在单行上显示li
，而不会松开其显示：块属性。这正是显示的内容：内联块是用于（）的：

代码
HTML
说明：
您需要将清除：两个都添加到段落
元素中
在ul{…}
中，我们将边距设置为0

在li{…}
中，我们通过将10px
的margin
置于右侧，在li
项之间留出一些空间
在li:last child{…}
中，我们删除了右边距：10px
&将其设置为0
，因为它是li
列表中的最后一项。

代码
HTML
说明：
您需要将清除：两个都添加到段落
元素中
在ul{…}
中，我们将边距设置为0

在li{…}
中，我们通过将10px
的margin
置于右侧，在li
项之间留出一些空间
在li:last child{…}
中，我们删除了margin right:10px
&将其设置为0
，因为它是li
列表中的最后一项。
使用p{clear:both；}
@Stilly.stack您的答案没有帮助。唯一的区别是所有内容都移动到页面的边缘。你的意思是在段落前面加上重置？让我始终感到困惑的是，人们试图用float
来修复元素周围的元素，而不是在罪魁祸首元素上使用position
、display
或margin
的正确属性
@Stilly.stack您的答案没有帮助。唯一的区别是所有内容都移动到页面的边缘。你的意思是将重置放在段落之前？总是让我感到困惑的是，人们试图用float
来修复元素周围的元素，而不是在罪魁祸首元素上使用位置
、显示
或边距
的正确属性。那么解释到哪里去了呢？：-）它现在在那里，我正在更新它。。。对不起。那么解释到哪里去了？：-）它现在在那里，我正在更新它。。。很抱歉。就个人而言，我更喜欢display:inline块display:inline块太
.clearfix:after{
    content:'';
        display:table;
        clear:both;
}

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

li {
  display: inline-block;
}

<body>
  <ul>
    <li>(...)</li>
    <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>

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

li {
  float: left;
  margin-right:10px;
}
li:last-child{
  margin-right:0;
}
p{
    clear: both;
}