显示 flex 与除 <input /> 之外的所有元素一起工作

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，无论它如何将它们完美地对齐在中间。但是元素直接向右移动......我之前尝试过 display:inline-block 但同样的问题。非常感谢任何帮助！

郑重声明，我希望两个输入字段在 div!

中水平均匀分布

Answer 1

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

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

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>

显示 flex 与除 <input /> 之外的所有元素一起工作

display flex working with all elements except for <input />

html

css

flexbox

display