CSS显示：表格标题

Question

当我将我的元素设置为display：CSS中的table-caption：它将它带到标签旁边。有没有办法把它放在最底层？

input, #number{
  display: table-cell;
}
#examples{
  background: red;
  width: 100%;
  position: absolute;
  left: 0;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group  col-md-6">
<label class="input-group-addon" id="number">Number</label>
<input type="text" class="form-control" required></input>
<ul id="examples">
    <li>111 111</li>
    <li> 11 11 11</li>
</ul>

</div>

<div class="input-group  col-md-6">
<label class="input-group-addon" id="number">Postal code</label>
<input type="text" class="form-control" required></input>
</div>

Answer 1

我不明白为什么这里需要表格布局，但table-caption可以与caption-side

一起使用

  

caption-side CSS属性将表<caption>的内容放在指定的一侧。这些值相对于表的writing-mode。

＆＃13;

＆＃13;

input,
#number {
  display: table-cell;
}

.input-group {
 /* display:table; *//* or table-row can be set here if needed */
}

#examples {
  background: red;
  margin: 0 1em;
  display: table-caption;
  caption-side: bottom;
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group  col-md-6">
<label class="input-group-addon" id="number">Number</label>
<input type="text" class="form-control" required/>
<ul id="examples">
    <li>111 111</li>
    <li> 11 11 11</li>
</ul>

</div>

<div class="input-group  col-md-6">
<label class="input-group-addon" id="number">Postal code</label>
<input type="text" class="form-control" required/>
</div>

＆＃13;

＆＃13;

＆＃13;