分配div内元素的大小

Question

我想在旁边显示输入的单位。 当div的大小发生变化时，我不希望单位“g”进入下一行。 输入应使用div内的所有剩余空间，只要这不会导致换行符。

<div style="width:100px"> 
 
    <input type="number" /> 
 
    g 
 
</div>

Answer 1

只需使用显示：弯曲和环绕用div标签内部元件。更多的灵活性，你可以找到母亲谷歌。

希望这会有所帮助。

<div style="width:100px;display:flex;"> 
 
    <div><input type="number" /></div> 
 
    <div>g</div> 
 
</div>

Answer 2

试试这个，

只是给一些空间，让文字显示您的div

更改宽度

<div style="width:200px;"> 
 
    <input type="number" /> 
 
    g 
 
</div>

Answer 3

最简单方式和跨浏览器支持的方法是使用显示 - 表和表小区

可以包裹'G'内的另一个<div>。然后你就可以得到它在并排侧不论宽度通过下面的CSS

body > div { 
 
    display: table; 
 
} 
 
body > div > * { 
 
    display: table-cell; 
 
}

<div style="width:100px"> 
 
    <input type="number" /> 
 
    <div>g</div> 
 
</div>