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

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>