display:block就是将元素显示为块级元素,总是在新行上开始。高度,行高以及顶和底边距都可控制。
<div class="fitem" style="display:block">
<label style="width:80px">密码:</label>
<input id="dlg_pwd" class="easyui-textbox" type="password" />
</div>
<div class="fitem" style="display:block">
<label style="width:80px">确认密码:</label>
<input id="dlg_confirmpwd" class="easyui-textbox" type="password" />
</div>
效果图:
display:inline就是将元素显示为行内元素,和其他元素都在一行上高,行高及顶和底边距不可改变。
<div class="fitem" style="display:inline">
<label style="width:80px">密码:</label>
<input id="dlg_pwd" class="easyui-textbox" type="password" />
</div>
<div class="fitem" style="display:inline">
<label style="width:80px">确认密码:</label>
<input id="dlg_confirmpwd" class="easyui-textbox" type="password" />
</div>
效果图:
display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。
<div class="fitem" style="display:inline-block">
<label style="width:80px">密码:</label>
<input id="dlg_pwd" class="easyui-textbox" type="password" />
</div>
<div class="fitem" style="display:inline-block">
<label style="width:80px">确认密码:</label>
<input id="dlg_confirmpwd" class="easyui-textbox" type="password" />
</div>
效果图:
PS:第三种方法默认左对齐,如果需要文字右对齐设置CSS即可。