如何使用CSS将一个输入框右侧链接并使该输入框占据剩余的全部宽度？

Question

这是一个非常基础的问题，但我认为输入框的行为很奇怪，所以我正在努力寻找解决方案。

我有一个流式宽度布局。我需要一个链接坐在输入框旁边。我需要输入框占据所有可用的宽度：

<a href="#">Information Link</a>
<input type="number" class="form-control form-control-default-new" placeholder="400">

如果输入是div，则只需将链接向右浮动，而无需进行其他操作。但是，如果我将输入设置为显示块，则它不会占用整个宽度。如果我将其宽度设置为100％，则它会占据整行，链接将不再在其旁边。

- Evanss

---

你是否有将输入内容包裹在 div 元素中的选项？ - RGLSV

如果需要，那就是的。 - Evanss

你需要的是这样的吗？http://jsfiddle.net/q8hk7fa8/ - dippas

Answer 1

如果你可以将输入包装在div容器中，你可以很容易地实现这个效果：

• float right 应用于 a 标签
• overflow: hidden 应用于 input 的 div 容器
• 将 input 的宽度设置为 100%
• 完成。

查看此处的演示

a{
    float: right;
}
div{
    overflow: hidden;
    padding-right: 20px;
}
input{
    box-sizing: border-box;
    width: 100%;
}

<a href="#">Information Link</a>
<div><input type="number" class="form-control form-control-default-new" placeholder="400"/></div>

- RGLSV

---

只需添加 input { box-sizing:border-box; } 即可解决输入框填充不受父级 div 限制的问题。 - Marcelo

@Marcelo添加。你可以尝试使用margin和padding来玩弄这个技巧，而不用担心有人会掉到行外:) - RGLSV

Answer 2

你可以尝试使用display: table和display: table-cell。 white-space:nowrap的CSS属性会防止第二个单元格（包含链接的单元格）折行，而在第一个单元格上设置width:100%会使该单元格大小扩展到表允许的最大值（即直到该单元格遇到带有nowrap限制的第二个单元格）。

JSFIDDLE DEMO

CSS:

* {
    box-sizing: border-box;
}
input {
    width: 100%;
}
.container {
    width: 100%;
    display: table;
}
.container div {
    display: table-cell;
    white-space: nowrap;
}
.link {
    text-align: right;
    padding-left: 10px;
}
.input-box {
    width: 100%;
}

HTML：

<div class="container">
    <div>
        <input type="number" class="form-control form-control-default-new" placeholder="400" />
    </div>
    <div class="link"> 
        <a href="#">Information Link</a>
    </div>
</div>

- JRulle

Answer 3

我会像这样为输入字段设置所需的宽度 http://codepen.io/anon/pen/PwpBoK

.wrapper {
  width: 100%;
  height: 120px;
  background: #ccc;
  padding: 12px;
}
.text {
  margin: 0 auto;
  width: 600px;

}
.container {
  background: #fff;
  margin: 0 auto;
  width: 600px;
  height: 45px;
  padding: 10px;
}

input {
  width: 400px;
  margin-right: 8px;
}

.form-control form-control-default-new {
  width: 400px;

}


<div class="wrapper">
  <div class="text">
    <p>I need this:</p>
  </div>
<div class="container">

<input type="number" class="form-control form-control-default-new" placeholder="400"><a href="#">Information Link</a>

</div>
</div>

- Dee

Answer 4

使用 display: block 和 float: left 的示例：

* {
  box-sizing: border-box;
}

a, input {
  display: block;
  float: left;
}

a {
  text-align: center;
  width: 20%
}

input {
  width: 80%
}

<input type="number" class="form-control form-control-default-new" placeholder="400">
<a href="#">Information Link</a>

- sodawillow