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

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

    label text
    

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

这是一个简单而干净的解决方案,不使用JavaScript或表布局黑客.它与此答案类似:输入文本自动宽度填充100%,其他元素浮动

用输出字段包装输入字段很重要display:block.接下来的事情是按钮必须先来,然后是输入字段.

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

HTML

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

     Search
     

    label text
    

form {
  width: 400px;
  border: 1px solid black;
  display: flex;
}

input {
  flex: 2;
}

input, label {
  margin: 5px;
}

  Sample label
  

    label text
    

label{ float: left; }

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

span > input{ width: 100%; }

    label
    longer label