Firefox中的內聯列表中的標籤和輸入/選擇對齊

Question

我想要一個內聯列表，其標籤顯示在其相應的輸入之上。

這撥弄表明，我用一個簡單的實現：JSFiddle

HTML

<form> 
    <ul> 
     <li> 
      <label for="FirstName">First Name</label> 
      <input type="text" id="FirstName" name="FirstName" /> 
     </li> 
     <li> 
      <label for="Gender">Gender</label> 
      <select id="Gender" name="Gender"> 
       <option value="1">Male</option> 
       <option value="2">Female</option> 
       <option value="3">N/A</option> 
      </select> 
     </li> 
     <li> 
      <input type="submit" value="Filter" /> 
     </li> 
    </ul> 
</form> 

CSS

ul { 
    list-style: outside none none; 
} 
li { 
    display: inline-block; 
} 
input, select { 
    display: block; 
} 

這個工程中是除了Firefox的所有瀏覽器，而且我爲什麼不知所措。 float: left對我來說不是一個很好的解決方案，因爲它會將內容對齊到li的頂部。在理想的解決方案中，「過濾器」按鈕在視覺上與左側的input和select元素一致，就像它在IE和Chrome上面的小提琴示例一樣。

Answer 1

如何使用display：inline-block;爲輸入，選擇CSS以及？

input, select { 
display: inline-block; 
} 

另外，加上display：block;在CSS中標籤。

這裏舉例：使用Flexbox的

https://jsfiddle.net/zy1uz0k3/10/

Answer 2

解決方案。

FlexBox Guide

ul { 
 
    list-style: outside none; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
li { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 150px; 
 
    margin: 10px; 
 
} 
 
li.submit { 
 
    flex-direction: row; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
li.submit [type="submit"] { 
 
    width: 100%; 
 
}

<form> 
 
    <ul> 
 
    <li> 
 
     <label for="FirstName">First Name</label> 
 
     <input type="text" id="FirstName" name="FirstName" /> 
 
    </li> 
 
    <li> 
 
     <label for="Gender">Gender</label> 
 
     <select id="Gender" name="Gender"> 
 
     <option value="1">Male</option> 
 
     <option value="2">Female</option> 
 
     <option value="3">N/A</option> 
 
     </select> 
 
    </li> 
 
    <li class="submit"> 
 
     <input type="submit" value="Filter" /> 
 
    </li> 
 
    </ul> 
 
</form>