div两栏，右文字垂直对齐

Question

need help with vertical alignment of span , a simple two column css for div with a label and span , align the text in span bottom, when label splits into 2 rows. 需要span垂直对齐时需要帮助，div的简单两列CSS带有label和span ，当label分成两行时，将span底部的文本对齐。

CSS 的CSS

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

Snippet 片段

  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>

Answer 1

simply set label as inline-block , and remove float:left 只需将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>

Answer 2

Use CSS Tables 使用CSS表格

 .form div { display: table; table-layout: fixed; } .form div > label { display: table-cell; width: 200px; text-align: right; padding-right: .5em; } .form div span { display: table-cell; vertical-align: bottom; }

 <div class="form" style="padding-top: 5px; padding-bottom: 25px; padding-left: 5px; "> <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>

OR 要么

Flexbox 弹性盒

 .form div { display: flex; align-items: flex-end; } .form div label { flex: 0 0 200px; text-align: right; padding-right: .5em; }

 <div class="form" style="padding-top: 5px; padding-bottom: 25px; padding-left: 5px; "> <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>

div两栏，右文字垂直对齐

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-05-19 15:45:30

解决方案2
1 2016-05-19 15:50:13

div两栏，右文字垂直对齐

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-05-19 15:45:30

解决方案2 1 2016-05-19 15:50:13

解决方案1
1 已采纳 2016-05-19 15:45:30

解决方案2
1 2016-05-19 15:50:13