如何使用窗體控件樣式選擇樣式，以便它在左邊與具有窗體控件樣式的輸入對齊？

Question

我注意到，如果我使用帶有select和input的flexbox，它們都帶有窗體控件樣式，它們不會在左邊對齊（我已將該文本放在黑體中，因爲人們似乎無法理解該問題） 。頂部輸入的左側不與選擇的左側對齊。如果我刪除輸入的填充，它們會對齊。

編輯：此問題出現在Chrome和Safari上。 Firefox是好的。

Plunker

標記

<div class="all"> 
    <div class="container"> 
    <label class="label">Input default</label> 
    <input class="input form-control"> 
    </div> 
    <div class="container"> 
    <label class="label">Input no padding</label> 
    <input class="input form-control no-padding"> 
    </div> 
    <div class="container"> 
    <label class="label">Select</label> 
    <select class="input form-control"> 
      <option>Hello</option> 
      <option>World</option> 
     </select> 
    </div> 
</div> 

CSS

.all { 
    display: flex; 
    flex-direction: column; 
    padding: 20px; 
} 

.container { 
    display: flex; 
    flex: 1; 
    align-items: center; 
} 

.input { 
    flex: 1 
} 

.label { 
    flex: 1; 
    background: yellow; 
    text-align: right; 
    padding-right: 10px; 
    margin-bottom: 0; 
} 

.no-padding { 
    padding: 0; 
} 

我怎樣才能樣式僅在選擇或使用Flexbox的，使其與輸入對齊？

，使其運行代碼片段除非所示那樣完全輸出的圖像中的代碼，請不要修改這個問題。

Answer 1

請試試這個。

.all { 
 
    display: flex; 
 
    flex-direction: column; 
 
    padding: 20px; 
 
} 
 
.col-form-label { 
 
    background: yellow; 
 
    text-align: right; 
 
} 
 
.container { 
 
    width: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="all"> 
 
    <div class="container"> 
 
    <div class="form-group row"> 
 
     <label class="col-xs-6 col-form-label">Input default</label> 
 
     <div class="col-xs-6 p-l-0"> 
 
     <input class="input form-control"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <label class="col-xs-6 col-form-label">Input no padding </label> 
 
     <div class="col-xs-6 p-l-0"> 
 
     <input class="input form-control"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
    <label class="col-xs-6 col-form-label">Select</label> 
 
    <div class="col-xs-6 p-l-0"> 
 
     <select class="input form-control"> 
 
     <option>Hello</option> 
 
     <option>World</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

不能添加填充物，因爲是由用戶代理生成，因此您可以使用appearance: none;重置瀏覽器默認，並添加自己的風格來選擇元素。 遺憾的是並不是所有的瀏覽器支持它：https://caniuse.com/#search=appearance

.all { 
 
    display: flex; 
 
    flex-direction: column; 
 
    padding: 20px; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex: 1; 
 
    align-items: center; 
 
} 
 

 
.input { 
 
    flex: 1 
 
} 
 

 
.label { 
 
    flex: 1; 
 
    background: yellow; 
 
    text-align: right; 
 
    padding-right: 10px; 
 
    margin-bottom: 0; 
 
} 
 

 
.no-padding { 
 
    padding: 0; 
 
} 
 

 
select.form-control { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
    padding: 6px 12px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="all"> 
 
    <div class="container"> 
 
    <label class="label">Input default</label> 
 
    <input class="input form-control"> 
 
    </div> 
 
    <div class="container"> 
 
    <label class="label">Input no padding</label> 
 
    <input class="input form-control no-padding"> 
 
    </div> 
 
    <div class="container"> 
 
    <label class="label">Select</label> 
 
    <select class="input form-control"> 
 
      <option>Hello</option> 
 
      <option>World</option> 
 
     </select> 
 
    </div> 
 
</div>

Answer 3

一個解決辦法是把柔性包裝中的各種元素。 This example shows the principle。

Working Plunker

標記

<div class="all"> 
    <div class="container"> 
    <div class="wrapper"> 
     <label class="label">Input default</label> 
    </div> 
    <div class="wrapper"> 
     <input class="form-control"> 
    </div> 
    </div> 
    <div class="container"> 
    <div class="wrapper"> 
     <label class="label">Select</label> 
    </div> 
    <div class="wrapper"> 
     <select class="form-control"> 
     <option>Hello</option> 
     <option>World</option> 
     </select> 
    </div> 
    </div> 
</div> 

CSS

.all { 
    display: flex; 
    flex-direction: column; 
    padding: 20px; 
} 

.container { 
    display: flex; 
    align-items: center; 
} 

.input { 
    flex: 1 
} 

.label { 
    flex: 1; 
    background: yellow; 
    text-align: right; 
    padding-right: 10px; 
    margin-bottom: 0; 
} 

.no-padding { 
    padding: 0; 
} 

.wrapper { 
    display: flex; 
    flex: 1; 
}