CSS显示：表格标题

Question

当我将我的元素设置为显示时：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。

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

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