Html 将p元素显示为内联块范围内的块

我有一些内联块元素，如：

<span style="display: inline-block">
  <img>
  <p>Some text</p>
  <p>Some more text</p>
  <button>A button</button>
</span>

一些文本

更多的文字

钮扣

我希望它们都是内联的，除了我希望第一个p元素位于另一个元素的顶部之外，还希望它们都与跨度的其余部分内联。从我所读到的内容来看，将div放在跨度内是一种不好的做法，那么最好的方法是什么呢？

这不是“不好的做法”，根本不可能。浏览器将“更正”您的HTML，并且它的行为将不符合预期

尝试使用

作为您的容器。

这不是“坏习惯”，根本不可能。浏览器将“更正”您的HTML，并且它的行为将不符合预期

---

试着用

作为你的容器。

根据我上面的评论，这里有一个关于你想要什么的猜测

.table{
显示：表格；
宽度：100%；
}
.行{
显示：表格行；
}
.细胞{
显示：表格单元格；
填充物：5px；
背景：ddd；
边框：1px实心#aaa；
垂直对齐：顶部；
}

第一段。第一段。第一段

第二段。第二段。第二段

按钮

根据我上面的评论，这里有一个关于你想要什么的粗略猜测

.table{
显示：表格；
宽度：100%；
}
.行{
显示：表格行；
}
.细胞{
显示：表格单元格；
填充物：5px；
背景：ddd；
边框：1px实心#aaa；
垂直对齐：顶部；
}

第一段。第一段。第一段

第二段。第二段。第二段

按钮

正如@Neit所指出的，当您将块级元素放入内联元素中时，浏览器将更正DOM（请参见第一个示例）。对于有效标记和语义标记而言，

div

，或者

节

无疑是更好的选择

使用CSS更改

显示：

确实有效，但这不是最佳做法（例如，用

em

代替上面的

span

将呈现完全相同的效果）。某些版本的浏览器也会忽略某些类型的

显示：

更改；因此，您的代码将失败。因此，使用更好的容器将提供最少的麻烦

请参见此处的代码：

---

正如@Neit所指出的，当您将块级元素放入内联元素中时，浏览器将更正DOM（请参见第一个示例）。对于有效标记和语义标记而言，

div

，或者

节

无疑是更好的选择

使用CSS更改

显示：

确实有效，但这不是最佳做法（例如，用

em

代替上面的

span

将呈现完全相同的效果）。某些版本的浏览器也会忽略某些类型的

显示：

更改；因此，您的代码将失败。因此，使用更好的容器将提供最少的麻烦

请参见此处的代码：

---

使用适当的div网格，并将内容放在其中。不要使用段落作为网格结构。当你说“在顶部”时，你指的是叠加元素（如三明治）？您可以使用

position:

来实现这一点。内联元素不应包含块元素。@Dawson“on-top-of”的意思如上所述，就好像两个p元素都是块，而不是重叠的一样。使用带div的适当网格，并将内容放在其中。不要使用段落作为网格结构。当你说“在顶部”时，你指的是叠加元素（如三明治）？您可以使用

position:

来实现这一点。内联元素不应该包含块元素。@Dawson“在”之上，意思是上面的，就好像两个p元素都是块，不重叠。我不明白为什么有人会为了避免使用

…

…而做出这些努力，因为表格是专门用于表格数据的。这显然不是表格数据。而且因为表格有一些限制和怪癖，使得现代的响应式布局更加困难。我不明白为什么有人会为了避免使用

…

…而做出这些努力，因为表格是专门用于表格数据的。这显然不是表格数据。而且，由于表格的局限性和怪癖，使得现代响应式布局更加困难。