如何使用窗体控件样式选择样式，以便它在左边与具有窗体控件样式的输入对齐？

Z时代
2024-01-10
分类：问答

我注意到，如果我使用带有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的，使其与输入对齐？

，使其运行代码片段除非所示那样完全输出的图像中的代码，请不要修改这个问题。

回答：

请试试这个。

.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>

回答：

不能添加填充物，因为是由用户代理生成，因此您可以使用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>

回答：

一个解决办法是把柔性包装中的各种元素。 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; 
}