首页 > 建站教程 > Div+Css >  P不能嵌套div标签,P标签不能嵌套块标签正文

P不能嵌套div标签,P标签不能嵌套块标签

今天在给客户做网站,发现P标签内部嵌套div后不能正常解析。于是做个试验,在这里详细记下来。
首先,模板网写了个如下的代码,运行后发现正常,火狐firebug也显示了正常解析:


提示:您可以先修改部分代码再运行

运行后效果如下:
P标签不能嵌套div
火狐firebug解析如下:
P标签不能嵌套div
当模板网把div放到p里面就出问题了:
<p style="border:3px solid red; width:300px; height:100px;">
	<div style="border:3px solid #000; width:280px; height:80px;"></div>
</p>
运行后还是和上面没有放到里面一个效果:
P标签不能嵌套div
火狐firebug解析的代码如下,它把p直接分成两份,就像div是把刀,把p切成了两部分:
P标签不能嵌套div
由此可见,p标签内部是不能嵌套div标签的。那么,如果把div变成行内标签呢,模板网给div加了“display:inline;”的样式,发现仍旧没有效果,只是div变成了黑条。
继续推理,p标签能不能嵌套其他块状标签呢,比如再嵌套个p。经过模板网测试,发现,p内部不能嵌套div、p、ul等等。估计,的确不能嵌套块状标签吧,即使把块状标签变成行内标签仍旧没有作用。
再继续推理,p标签能不能嵌套行内标签呢?经过测试,可以。即使把行内标签变成块状标签也可以,测试代码和效果图如下:
<p style="border:3px solid red; width:300px; height:100px;">
	<span style="border:3px solid #000; width:280px; height:80px; display:block">dddd</span>
</p>

P标签嵌套块状行内标签效果