div 裡套 span 會在同一行顯示。div 裡套 div 會分不同行顯示。這樣也能實現田字格佈局

<div>    
    <span style="color:blue">藍色</span>
    <span style="color:blue">藍色</span>
</div>   
</br>
    
<div>    
    <div style="color:blue">藍色</div>
    <div style="color:blue">藍色</div>
</div>  

效果：

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

 

效果，田字格佈局：