Question

我正在尝试制作一个简单的订阅表单，其中包含两个元素：

文本框 - 向左浮动，填满剩余空间。
按钮 - 向右浮动，宽100px。

问题是我无法让文本框填满剩余的宽度。

.container
{
  width: 100%;
}

.input-field
{
  float: left;
}

.button
{
  float: right;
  width: 100px;
}

<div class='container'>
  <input class='input-field'/>

  <div class='button'>Subscribe</div>
</div>

http://jsfiddle.net/7nyY7/136/

由于某种原因，文本框在按钮开始之前不会拉伸。

所以我尝试了不同的方法并使用了表，这正是我想要完成的，但问题是每当我向按钮添加填充并输入时，它们都互相溢出：

http://jsfiddle.net/B46wu/111/

是否可以使文本框在按钮开始的位置结束，无论填充是否存在？

由于设计原因，我需要将textbutton和button完全相邻。没有JS，这可能吗？谢谢！

Answer 1

最好的方法是使用 Flexbox ...将flex:1应用于input以获取剩余空间

Stack Snippet

.container {
  display: flex;
}

.input-field {
  flex: 1;
}

.button {
  width: 100px;
  background: red;
  color: white;
  text-align: center;
}

<div class='container'>
  <input class='input-field' />

  <div class='button'>
    Subscribe
  </div>
</div>

如果您想使用float解决方案，则需要将input的宽度设置为等于calc(100% - 100px)

.container {
  width: 100%;
}

.input-field {
  float: left;
}

.button {
  float: left;
  width: 100px;
  background: red;
  color: white;
  text-align: center;
}

input {
  width: calc(100% - 100px);
  box-sizing: border-box;
}

.container:after {
  content: "";
  display: table;
  clear:both;
}

<div class='container'>
  <input class='input-field' />
  <div class='button'>
    Subscribe
  </div>
</div>

Answer 2

您可以将display: flex应用于容器，并将flex-grow属性添加到文本框中，这将使其增长以填充剩余空间。

您可以阅读flexbox here

.container {
  width: 100%;
  display: flex;
}

.input-field {
  background-color: red;
  opacity: 0.5;
  flex-grow: 1;
}

.button {
  width: 100px;
  background-color: blue;
  opacity: 0.5;
}

<div class='container'>
  <input class='input-field' />

  <div class='button'>
    Subscribe
  </div>
</div>

两个div，第一个自动调整，第二个固定宽度

2 个答案: