Question

假设我有一个像这样的html片段：

<div style="width:300px;">
    <label for="MyInput">label text</label>
    <input type="text" id="MyInput" />
</div>

这不是我的确切代码，但重要的是在固定宽度容器中的同一行上有标签和文本输入。如何设置输入样式以填充容器的剩余宽度而不包装并且不知道标签的大小？

Answer 1

这是一个简单而干净的解决方案，不使用JavaScript或表布局黑客。它类似于这个答案：Input text auto width filling 100% with other elements floating

使用display:block的范围包装输入字段非常重要。接下来的事情是按钮必须先来，然后是输入字段。

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

HTML

<form method="post">
     <button>Search</button>
     <span><input type="text" title="Search" /></span>
</form>

CSS

form {
    width: 500px;
    overflow: hidden;
    background-color: yellow;
}
input {
    width: 100%;
}
span {
    display: block;
    overflow: hidden;
    padding-right:10px;
}
button {
    float: right;
}

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

更新1：如果您的网站仅面向现代浏览器，我建议使用flexible boxes。在这里，您可以看到the current support。

更新2：这甚至适用于多个按钮或与输入字段共享的其他元素。这是an example。

Answer 2

尽管每个人都讨厌表格的布局，他们会帮助这样的事情，使用显式表格标签或使用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>

Answer 3

我建议使用Flexbox：

请务必添加正确的供应商前缀！

＆＃13;

form {
  width: 400px;
  border: 1px solid black;
  display: flex;
}

input {
  flex: 2;
}

input, label {
  margin: 5px;
}

＆＃13;

<form method="post">
  <label for="myInput">Sample label</label>
  <input type="text" id="myInput" placeholder="Sample Input"/>
</form>

＆＃13;

Answer 4

请使用flexbox。你有一个容器，可以将它的孩子变成一排。第一个孩子根据需要占据空间。第二个弯曲以占用所有剩余空间：

<div style="display:flex;flex-direction:row">
    <label for="MyInput">label&nbsp;text</label>
    <input type="text" id="MyInput" style="flex:1" />
</div>

Answer 5

实现这一目标的最简单方法是：

CSS：

label{ float: left; }

span
{
    display: block;
    overflow: hidden;
    padding-right: 5px;
    padding-left: 10px;
}

span > input{ width: 100%; }

HTML：

<fieldset>
    <label>label</label><span><input type="text" /></span>
    <label>longer label</label><span><input type="text" /></span>
</fieldset>

看起来像： http://jsfiddle.net/JwfRX/

Answer 6

非常简单的技巧是使用CSS calc公式。所有现代浏览器，IE9，各种移动浏览器都应该支持这一点。

<div style='white-space:nowrap'>
  <span style='display:inline-block;width:80px;font-weight:bold'>
    <label for='field1'>Field1</label>
  </span>
  <input id='field1' name='field1' type='text' value='Some text' size='30' style='width:calc(100% - 80px)' />
</div>

Answer 7

你可以试试这个：

＆＃13;

div#panel {
    border:solid;
    width:500px;
    height:300px;
}
div#content {
	height:90%;
	background-color:#1ea8d1; /*light blue*/
}
div#panel input {
	width:100%;
	height:10%;
	/*make input doesnt overflow inside div*/
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
	/*make input doesnt overflow inside div*/
}

＆＃13;

<div id="panel">
  <div id="content"></div>
  <input type="text" placeholder="write here..."/>
</div>

＆＃13;

Answer 8

如果您使用的是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/

样式输入元素以填充其容器的剩余宽度

8 个答案: