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>