显示器弯曲。如何在第一个元素下面显示第二个元素。

Question

我有一个障碍需要解决。我想要元素下面的元素。我使用了display-flex，并且不知道如何将元素标签直接移动到select元素下面？是否可以使用弹出框，而不是使用普通显示：块;在每个元素上？

这里是我的代码：

<div class="choose-list"> 
        <select name="priority" size="1"> 
         <option value="wybierz z listy">wybierz z listy</option> 
         <option value="Normal">Normal</option> 
         <option value="High">High</option> 
         <option value="Emergency">Emergency</option> 
        </select> 
        <label>rodzaj domu</label> 
        <select name="priority" size="1"> 
         <option value="wybierz z listy">wybierz z listy</option> 
         <option value="Normal">Normal</option> 
         <option value="High">High</option> 
         <option value="Emergency">Emergency</option> 
        </select> 
        <label>rodzaj zadaszenia</label> 
        <select name="priority" size="1"> 
         <option value="wybierz z listy">wybierz z listy</option> 
         <option value="Normal">Normal</option> 
         <option value="High">High</option> 
         <option value="Emergency">Emergency</option> 
        </select> 
        <label>rodzaj stropu</label> 
        <select name="priority" size="1"> 
         <option value="wybierz z listy">wybierz z listy</option> 
         <option value="Normal">Normal</option> 
         <option value="High">High</option> 
         <option value="Emergency">Emergency</option> 
        </select> 
        <label>garaż</label> 
       </div> 

和CSS文件：

.choose-list{ 
    display: flex; 
    justify-content: space-between; 
    label{ 

    } 
} 

Answer 1

基于评论更新

包装每个选择/标签，并给他们display: flex; flex-direction: column;

.choose-list { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.choose-list > div { 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<div class="choose-list"> 
 
    <div> 
 
    <select name="priority" size="1"> 
 
         <option value="wybierz z listy">wybierz z listy</option> 
 
         <option value="Normal">Normal</option> 
 
         <option value="High">High</option> 
 
         <option value="Emergency">Emergency</option> 
 
        </select> 
 
    <label>rodzaj domu</label> 
 
    </div> 
 
    <div> 
 
    <select name="priority" size="1"> 
 
         <option value="wybierz z listy">wybierz z listy</option> 
 
         <option value="Normal">Normal</option> 
 
         <option value="High">High</option> 
 
         <option value="Emergency">Emergency</option> 
 
        </select> 
 
    <label>rodzaj zadaszenia</label> 
 
    </div> 
 
    <div> 
 
    <select name="priority" size="1"> 
 
         <option value="wybierz z listy">wybierz z listy</option> 
 
         <option value="Normal">Normal</option> 
 
         <option value="High">High</option> 
 
         <option value="Emergency">Emergency</option> 
 
        </select> 
 
    <label>rodzaj stropu</label> 
 
    </div> 
 
    <div> 
 
    <select name="priority" size="1"> 
 
         <option value="wybierz z listy">wybierz z listy</option> 
 
         <option value="Normal">Normal</option> 
 
         <option value="High">High</option> 
 
         <option value="Emergency">Emergency</option> 
 
        </select> 
 
    <label>garaż</label> 
 
    </div> 
 
</div>

---

，或给他们的最低20.1％的宽度，增加flex-wrap: wrap和标签的顺序设置为1

.choose-list { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 
.choose-list > * { 
 
    flex-basis: 20.1%;  /* need a value greater than 20% 
 
           so they break line after 4 items */ 
 
} 
 
.choose-list > label { 
 
    order: 1; 
 
}

<div class="choose-list"> 
 
    <select name="priority" size="1"> 
 
         <option value="wybierz z listy">wybierz z listy</option> 
 
         <option value="Normal">Normal</option> 
 
         <option value="High">High</option> 
 
         <option value="Emergency">Emergency</option> 
 
        </select> 
 
    <label>rodzaj domu</label> 
 
    <select name="priority" size="1"> 
 
         <option value="wybierz z listy">wybierz z listy</option> 
 
         <option value="Normal">Normal</option> 
 
         <option value="High">High</option> 
 
         <option value="Emergency">Emergency</option> 
 
        </select> 
 
    <label>rodzaj zadaszenia</label> 
 
    <select name="priority" size="1"> 
 
         <option value="wybierz z listy">wybierz z listy</option> 
 
         <option value="Normal">Normal</option> 
 
         <option value="High">High</option> 
 
         <option value="Emergency">Emergency</option> 
 
        </select> 
 
    <label>rodzaj stropu</label> 
 
    <select name="priority" size="1"> 
 
         <option value="wybierz z listy">wybierz z listy</option> 
 
         <option value="Normal">Normal</option> 
 
         <option value="High">High</option> 
 
         <option value="Emergency">Emergency</option> 
 
        </select> 
 
    <label>garaż</label> 
 
</div>