如果你正在使用Bootstrap 4:

<form class="d-flex">
  <label for="myInput" class="align-items-center">Sample label</label>
  <input type="text" id="myInput" placeholder="Sample Input" class="flex-grow-1"/>
</form>

更好的是，使用Bootstrap内置的东西:

  <form>
    <div class="input-group">
      <div class="input-group-prepend">
        <label for="myInput" class="input-group-text">Default</label>
      </div>
      <input type="text" class="form-control" id="myInput">
    </div>
  </form>

https://jsfiddle.net/nap1ykbr/

尽管每个人都讨厌表格的布局，但它们确实在这方面有所帮助，要么使用显式的表格标签，要么使用display:table-cell

<div style="width:300px; display:table">
    <label for="MyInput" style="display:table-cell; width:1px">label&nbsp;text</label>
    <input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>

我建议使用Flexbox:

不过，一定要添加适当的供应商前缀! {形式 宽度:400 px; 边框:1px纯黑色; 显示:flex; ｝ 输入{ flex: 2; ｝ 输入，标签{ 保证金:5 px; ｝ <形式方法=“post”> <label for="myInput">样本标签</label> <input type="text" id="myInput" placeholder="Sample input "/> > < /形式

这里给出的答案有点过时了。所以，在这里，我使用现代flexbox最简单的解决方案。

.input-container { 显示:flex; ｝ 输入{ flex-grow: 1; margin-left: 5 px; ｝ < div风格= "宽度:300 px;" > < div class = "输入容器”> <label for="MyInput">label text: </label> <input type="text" id="MyInput"/> < / div > < div class = "输入容器”> <label for="MyInput2">长标签文本:</label> <input type="text" id="MyInput2" /> < / div > < / div >

这里有一个简单而干净的解决方案，无需使用JavaScript或表格布局技巧。它类似于这个答案:输入文本自动填充100%的宽度与其他元素浮动

重要的是用一个span来包装输入字段，这个span是display:block。下一件事是按钮必须在前面，输入字段必须在后面。

然后，您可以将按钮浮动到右侧，输入字段将填充剩余的空间。

{形式 宽度:500 px; 溢出:隐藏; 背景颜色:黄色; ｝ 输入{ 宽度:100%; ｝ 跨度{ 显示:块; 溢出:隐藏; padding-right: 10 px; ｝ 按钮{ 浮:正确; ｝ <形式方法=“post”> 搜索按钮< / > < >按钮 <span><input type="text" title="Search" /></span> . > < /形式

一个简单的小提琴:http://jsfiddle.net/v7YTT/90/

更新1:如果你的网站只针对现代浏览器，我建议使用灵活的盒子。在这里您可以看到当前的支持。

更新2:这甚至适用于多个按钮或其他与输入字段共享full with的元素。这里有一个例子。

如果你正在使用Bootstrap 4:

<form class="d-flex">
  <label for="myInput" class="align-items-center">Sample label</label>
  <input type="text" id="myInput" placeholder="Sample Input" class="flex-grow-1"/>
</form>

更好的是，使用Bootstrap内置的东西:

  <form>
    <div class="input-group">
      <div class="input-group-prepend">
        <label for="myInput" class="input-group-text">Default</label>
      </div>
      <input type="text" class="form-control" id="myInput">
    </div>
  </form>

https://jsfiddle.net/nap1ykbr/