html - 当内容改变时动态改变元素的宽度

Question

我有一个包含 6 个输入的 div。其中两个的显示是“无”，当我单击复选框时，这两个输入显示将是“内联”。当其他两个输入到来时，我希望我的 div 宽度改变并增加。
网页格式:

<div class="row" id="row1">
  <input class="input" id="material_name" value="Material" />
  <input class="input" id="material_name" value="Material" />
  <input class="input" id="unit" value="Unit" />
  <input class="input" id="count" value="11" />
  <input class="input" id="unit_price" placeholder="Unit Price" />
  <input class="input" id="total_price" placeholder="Total Price" />
</div>

Answer 1

div 是 block 行元素，而 span 是行内元素。如果你需要用html改变它，你可以用span替换div标签，否则改变显示的div，使其表现得像 span。默认情况下， block 行元素的width属性，不依赖于它的innerHTML，但是对于行内元素，width属性随着它的变化而变化内部元素的宽度

#row1{
显示:内联 block ；
}