div 里套 span 会在同一行显示。这样也能实现田字格布局

<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>

 

效果，田字格布局：