让表格填充宽度的其余部分

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一个弹性框 - 这允许form和input-box保持在同一行。

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

2. 将flex: 1添加到form，让它延伸到剩余空间。

3. Flexbox“flexing”应用于您为其提供display: flex的容器的直接子项。因此，您必须将内部div input-box声明为Flex容器。

4. 现在将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>