html - 获取输入以填充剩余宽度，如 span 元素

Question

我想让文本输入填充 div 中剩余的水平空间。

这里的答案提供了一个使用跨度执行此操作的简单示例：https ://stackoverflow.com/a/3499333/165673 ，但由于某种原因，我无法让我的输入元素以相同的方式运行。

HTML：

<div>
<span class="a">something</span>
<span class="b">fill the rest</span> 
</div>

<div>
<span class="a">something</span>
<input class="b" value="fill the rest">       
</div>

CSS：

.a {
    float:left; background-color:red
}
.b {
    background-color:green;display:block;
}

小提琴：http: //jsfiddle.net/FKZUA/1/

在第一个示例中， span.b 填充剩余空间。但是， input.b 不会。

Answer 1

这应该为您解决问题：

css

.a {
    display:table-cell; background-color:red;
}
.b {
    display:table-cell; background-color:green; width:100%;
}
.c { width:100%; }
​

html

<div>
  <span class="a">something</span>
  <span class="b">fill the rest</span> 
</div>
<div>
  <span class="a">something</span>
  <span class="b"><input class="c" value="fill the rest" /></span>
</div>

jsfiddle：http: //jsfiddle.net/FKZUA/55/

Answer 2

您可以在此处使用 ol' table 显示技巧。失去浮动并设置div为显示：表；以及要显示的孩子：表格单元格；.

这是一个显示它的示例。您可能需要进行一些调整以按照您想要的方式获取“某些东西”（例如，设置宽度），但这可能比您想要做的更多。

div {
  display: table;
  width: 100%;
}
.a, .b {
  display: table-cell;
}
.b {
  width: 100%; 
}

Answer 3

CSS：

button.send {
    float: right;

    
}
span.send {
    display: block;
    overflow: hidden;
 
}
input.send {
    width:100%;
    
}

html:

<button type="button" id = "send_button" class="send" >SEND</button><span class="send"><input type="text" id = "newmessage" class="send" required></span>