<div>
<span style="color:blue">蓝色</span>
<span style="color:blue">蓝色</span>
</div>
</br>
// div 里套 span 会在同一行显示
<div>
<div style="color:blue">蓝色</div>
<div style="color:blue">蓝色</div>
</div>
// div 里套 div 会分不同行显示。
效果:
---------------------------------------------------------------------------------------
// div 套 span 实现田字格的例子:
<!-- span 设置 width 无效解决办法:在style中加 display:inline-block; -->
<div style="margin-bottom: 5px">
<span style="color: blue; width: 50px; display:inline-block">用户名:</span>
<span >
<input type="input" id="userName" style="font-size: 14pt; width:120; height:27" >
</span>
</div>
<div style="margin-bottom: 5px">
<span style="color: blue; width: 50px; display:inline-block">密码:</span>
<span >
<input type="input" id="password" style="font-size: 14pt; width:120; height:27" >
</span>
</div>
效果,田字格布局: