display:block、inline、inline-block

雨点打透心脏的1/2处 2022-06-05 02:58 217阅读 0赞

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

效果图：

![Center][]

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

效果图：

![Center 1][]

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

效果图：  
![Center 2][]  
PS：第三种方法默认左对齐，如果需要文字右对齐设置CSS即可。

[Center]: /images/20220605/44b0a62344fc49eeb56ac449d0d05631.png
[Center 1]: /images/20220605/854d40f3d466484899b24425da2a3f93.png
[Center 2]: /images/20220605/d5a5e33295b24e1a8592724841c4eebb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，217人围观）

还没有评论，来说两句吧...

相关阅读