html - 让表格填充其余宽度

Question

我的代码:https://jsfiddle.net/sf4g3v9n/

我希望输入填充剩余空间。我在这个网站上搜索了很多，但找不到合适的答案。

重要:右边的文字是动态的，所以没有绝对宽度。

我的 HTML 结构:

<div class="container">
  <form>
    <div class="input-box">
      <input type="text" placeholder="search..." />
    </div>
  </form>
  <div class="selector">
    <p>
      dynamic content
    </p>
  </div>
</div>

Answer 1

您可以像这样使用 flexbox 来做到这一点:

* {
  margin: 0;
  padding: 0;
}

.container {
  width: 700px;
  display: flex;
}

form {
  float: left;
  flex: 1;
}

form .input-box{
  width: 100%;
  display: flex;
}

form input {
  padding: 10px 15px;
  font-size: 18px;
  width: 100%;
}

.selector {
  float: right;
}

.selector p {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 10px 15px;
  font-size: 20px;
}

<div class="container">
  <form>
    <div class="input-box">
      <input type="text" placeholder="search..." />
    </div>
  </form>
  <div class="selector">
    <p>
      dynamic content
    </p>
  </div>
</div>

因为您希望输入填充剩余空间，所以 flexbox 是一个自然的选择，因为这正是它的用途!

下面是我对您的代码所做的更改:

1. 首先，我通过这样做使您的 container 成为一个 flexbox - 这允许 form 和 input-box 留在同一行。

   .container {
     width: 700px;
     display: flex;
   }
   

2. 已将 flex: 1 添加到您的 form 以使其延伸到剩余空间。

3. Flexbox 'flexing' 应用于您为其指定 display: flex 的容器的直接子级。因此，您也必须将内部 div input-box 声明为 flex 容器。

4. 现在将 input 框的宽度设置为 100% 就可以了!

干杯!