html - 显示 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-block 但同样的问题。任何帮助深表感谢！

作为记录，我想要两个输入字段在一个 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>