我正在嘗試將我的標簽移動到下拉選擇框上方，并將其放在中心但不是運氣 - 這是我到目前為止所做的。
.select_label {
display: inline-block;
width: 10em;
margin-bottom: 100px;
margin-right: .5em;
padding-top: 1.5em;
text-align: center;
color: black;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 8pt;
font-weight: bold;
}
.selectors {
max-width: 150px;
}<div id="datebar">
<div>
<label class="select_label" for="strat1">Label
<select name="column" class="selectors" id="strat1">
{% for col in column[1:] %}
<option>{{col}}</option>
{% endfor %}
</select></label>
</div>
</div>這是一個 JSFiddle：https ://jsfiddle.net/7dnxaupt/
uj5u.com熱心網友回復：
您可以將display它們作為block并將選擇從標簽中取出。
另一種選擇可能是將以下行添加到標簽：
.select_label {
position: relative;
height: 3em;
...
}
這對選擇：
.selectors {
position: absolute;
bottom: 0;
}
使用絕對位置并不總是好的，但它會起作用。如果標簽上的高度固定，那應該沒問題。這可能不是回應式設計的最佳選擇......
您還可以通過許多其他方式來管理它，例如使用網格布局、flex-box 等。
uj5u.com熱心網友回復：
從網格使用并執行此更改：
.grid{ /* here */
display: grid;
grid-gap: 10px;
}
.select_label {
display: inline-block;
width: 10em;
/* remove margin-bottem */
margin-right: .5em;
padding-top: 1.5em;
text-align:center;
color: black;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 8pt;
font-weight: bold;
}
.selectors{
max-width: 150px;
}<div id="datebar">
<div class="grid">
<label class="select_label" for="strat1">Label</label> <!-- here -->
<select name="column" class="selectors" id="strat1">
{% for col in column[1:] %}
<option>{{col}}</option>
{% endfor %}
</select>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/419393.html
標籤：