让表格填充其余宽度

Question

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

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

我的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>

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

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

首先，我通过这样做让你的 container 成为一个 flexbox - 这允许 form 和 input-box 保持在同一行。
```
.container {
  width: 700px;
  display: flex;
}
```
已将 flex: 1 添加到您的 form 以使其延伸到剩余的 space。
Flexbox 'flexing' 应用于您为其指定 display: flex 的容器的直接子级。所以你也必须将你的内部 div input-box 声明为 flex 容器。
现在将 input 框的宽度设置为 100% 就可以了！

干杯！

Answer 2

Flexbox 可以做到这一点：

评论讲解方法论

Guide to Flexbox

* {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  /* create flex-container */
  margin-bottom: 1em;
}
form {
  flex: 1;
  /* expand to as much width as is remaining */
}
.input-box {
  display: flex;
  /* new inner flex-container */
}
form input {
  padding: 10px 15px;
  font-size: 18px;
  flex: 1;
  /* expand to as much width as is remaining */
}
.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>
      Lorem ipsum dolor sit amet.
    </p>
  </div>
</div>

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

让表格填充其余宽度

Let form fill rest of the width

html

css

css-float