在学习网络开发时，我遇到了一个问题。
那是我的代码:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
background: blue;
}
.primary
{
color: red;
}
</style>
</head>
<body>
<p>
text1
<div class="primary">
text
</div>
text2
</p>
</body>
</html>
由于某种原因浏览器转换
<p>至 <p>text</p>和 </p>到相同。所以，而不是 <div>嵌套在 <p> (我在源代码中实际写的内容!)我明白了:...
<body>
<p>
text1
</p>
<div class="primary">
text
</div>
text2
<p></p>
</body>
...
我想这是因为
<p>既可以是空元素(如 <br> )也可以不是空元素(如 <div> )。你能解释一下问题并给出解决方案吗？谢谢你。
最佳答案
<div>标签，如 <p>是一个块级元素，这意味着它被设计为包含它自己的块，周围有换行符。试图嵌套一个 <div>内部 <p>不太可能做你想做的事，因为它没有多大意义。 A <p>是一个段落，它不应该包含块级元素。这个问题可能与:
https://stackoverflow.com/questions/4291467/nesting-block-level-elements-inside-the-p-tag-right-or-wrong
尝试使用 <span>相反，因为 <span>是一个内联元素，旨在显示在段落内。如果确实需要多个块级元素，请考虑不使用 <p>在那里，或者将它们用作最内部的块级元素而不是外部元素。
关于html - <div> 嵌套在 <p> 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44835895/