使项目使用剩余空间宽度

Question

我想将文本和输入放在1行，其中输入字段占用剩余空间的总宽度。

所以不是这个：

我找到的唯一解决方案是overflow: hidden，但我不喜欢它，因为它是文本输入。

有可能吗？如果是的话，怎么样？

请勿使用90%解决方案。

http://jsfiddle.net/clankill3r/aLmctj4h/

  <div id="container">
        foobar: <input type="text" value="foobar" />
    </div>

    #container {
        background: #ccc;
        width: 640px;
        min-height: 400px;
        margin: 0 auto;
        padding: 10px;
    }

    input {
        width: 100%;
    }

Answer 1

这应该有效：

CSS：

#container {
background: #ccc;
width: 640px;
min-height: 400px;
margin: 0 auto;
padding: 10px;
}

label {
    float: left;
    padding: 3px 0 0 0;
}
span {
    display: block;
    overflow: hidden;
    padding: 0 0 0 5px;
}
input {
    width: 100%
}

HTML：

<div id="container">
<label>foobar:</label>
<span><input type="text" value="foobar" /></span>
</div>

如果我理解你的问题，你可以使foobar成为标签并稍微改变宽度以调整尺寸。

Answer 2

CSS：

 .div-table {
   width:100%;
   display: table;
   border-collapse: collapse;
 }

 .div-table .div-table-row {
   display: table-row;
 }

 .div-table .div-table-cell {
   display: table-cell;
 }

 .nostretch {
   width:1%;
   white-space:nowrap;
 }

 input {
   width: 100%;
 }

HTML：

 <div id="container">
     <div class='div-table'>
         <div class='div-table-row'>
             <div class='div-table-cell nostretch'>foobar:</div>
             <div class='div-table-cell'>
                 <input type="text" value="foobar" />
             </div>
         </div>
     </div>
 </div>

http://jsfiddle.net/aLmctj4h/4/

Answer 3

<div>
  <div>
    <label for="test">test line</label>
  </div>
  <div>
    <input type="text" id="test">
  </div>
</div>

的CSS ::

div {
  display: flex;
  flex-direction: row;

  div + div {
    flex: 1;
  }

  input {
    width: 100%;
  }
}

// unimportant bits
* {
  box-sizing: border-box;
}

html {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}