分配div中元素的大小

Question

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

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

Answer 1

只需使用display：flex并使用div标签环绕内部元素。更多关于flex的信息，你可以在Google上找到。

希望这有帮助。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

  

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

您可以将'g'包含在另一个<div>中。然后你可以通过跟随CSS来并排而不管宽度

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

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

Answer 3

试试这个。，

为显示的文字留出一些空间

更改div的宽度

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