Question

需要帮助span的垂直对齐，一个带有label和span的div的简单两列css，在标签拆分时对齐span底部的文本分为2行。

CSS

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

段

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

只需将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

使用 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 个答案: