显示 flex 使用除 <input /> 之外的所有元素 [重复]答案

【问题标题】：display flex working with all elements except for <input /> [duplicate]显示 flex 使用除 <input /> 之外的所有元素 [重复]
【发布时间】：2021-02-23 19:49:39
【问题描述】：

我对以下问题感到非常困惑。 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 和任何其他 HTML 标记，它都能很好地将它们在中间对齐。但是元素直接向右......我之前尝试过 display:inline-block 但同样的问题。非常感谢任何帮助！

作为记录，我希望两个输入字段在一个 div 中水平分布！

【问题讨论】：

我不太明白。你在这里的真正意图是什么？ 在一个 div 中水平分布的输入字段是什么意思？如果可以，请分享一张图片或您想要实现的目标。
输入元素的最小宽度：0

标签： html css flexbox display

【解决方案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>

【讨论】：

或width: 100%;