gpt4 book ai didi

html - div 两列,右文本垂直对齐

转载 作者:太空宇宙 更新时间:2023-11-04 02:25:50 25 4
gpt4 key购买 nike

需要有关span 垂直对齐的帮助,一个简单的两列 div CSS,带有 labelspan,对齐 中的文本code>span 底部,当标签分成 2 行时。

screenshot span text vertical aligns top

CSS

div.form label {
width: 200px;
float: left;
text-align: right;
margin-right: .5em;
display: block;
}

片段

 div.form label {
width: 200px;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}
<div class="form" style="padding-top: 5px; padding-bottom: 25px;  padding-left: 5px; ">
<div>
<label style="width: 200px;">Fiscal Period of 2018 End Date:</label> <span style="vertical-align: bottom; display:">08/31/1998</span>
</div>
<div style="clear: both;">
<label style="width: 200px;">Type of Circular A-133 OMB Audit:</label> <span style="vertical-align: bottom; position: absolute;">S</span>
</div>
<div style="clear: both;">
<label style="width: 200px;">Audit Period Covered:</label> <span>A</span>
</div>
<div style="clear: both;">
<label style="width: 200px;">If Audit Period Other, Number of months:</label> <span tyle="vertical-align: bottom; ">4</span>
</div>
</div>
</body>
<html>

最佳答案

只需将 label 设置为 inline-block ,并移除 float:left

.form label {
width: 200px;
text-align: right;
margin-right: 0.5em;
display: inline-block
}
<div class="form">
<div>
<label>Fiscal Period of 2018 End Date:</label> <span>08/31/1998</span>
</div>
<div>
<label>Type of Circular A-133 OMB Audit:</label> <span>S</span>
</div>
<div>
<label>Audit Period Covered:</label> <span>A</span>
</div>
<div>
<label>If Audit Period Other, Number of months:</label> <span>4</span>
</div>
</div>

关于html - div 两列,右文本垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37328029/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com