显示 Flex 处理除<输入/>之外的所有元素

Question

我对以下问题感到非常困惑。HTML:

<div className="SearchBar">
<div className="SearchBar-container">
<input />
<input />
</div>
</div>

CSS：

SearchBar {
background-color: #0055ff;
margin: 0 auto;
border-radius: 10px;
width: 80%;
border: 2px solid red;
}

.SearchBar-container {
display: flex;
}
.SearchBar-container input {
border: 1px solid #fff;
border-radius: 4px;
font-size: .77rem;
font-weight: 500;
height: 40px;
}

如果我尝试任何其他的HTML标记，比如span，div，a，不管怎样，都可以很好地将它们放在中间。但元素直接向右移动。。。我早些时候尝试过display:inline块，但遇到了同样的问题。非常感谢您的帮助！

对于记录，我希望两个输入字段在一个div中水平均匀分布！

Answer 1

如果将flex:1添加到输入的CSS中，它们将均匀分布在flexed行中。

我在这里添加了彩色背景，这样你就可以清楚地看到哪个元素是什么。

SearchBar {
background-color: #0055ff;
margin: 0 auto;
border-radius: 10px;
width: 80%;
border: 2px solid red;
}

.SearchBar-container {
background-color: magenta;
display: flex;
}
.SearchBar-container input {
background-color: cyan;
border: 1px solid #fff;
border-radius: 4px;
font-size: .77rem;
font-weight: 500;
height: 40px;
flex: 1;
}

<div class="SearchBar">
<div class="SearchBar-container">
<input />
<input />
</div>
</div>