CSS 显示：表格标题

Question

When I set my element to display: table-caption in CSS: It brings it next to the label. Is there a way to keep it at the bottom?

 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

I do not understand why a table layout is needed here, but table-caption can go along with caption-side

The caption-side CSS property puts the content of a table's <caption> on the specified side. The values are relative to the writing-mode of the table.

 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>