Question

我有一个看起来像这样的结构：

<div class="col-md-7">
  <div style="float:left; padding-right:10px">
    <h5>{{text}}</h5>
  </div>
  <div style="float:left">
    <input type="text">
  </div>
</div>

父div具有固定宽度，但{{text}}具有可变长度。我希望文本和输入都适合同一行。如何使用css使输入宽度动态化？

Answer 1

在width: 100%;和h5元素上添加input可以让他们填充父母：

h5 { width: 100%; }
input { width: 100%; }

但是，听起来您的问题出在那些父div中，而不是h5或input元素。

您可以将display:inline-block;添加到其样式中，然后应用宽度（类似于50％）来并排对齐这些div：

<div class="col-md-7">
  <div style="float:left; display:inline-block; width:50%;">
    <h5>{{text}}</h5>
  </div>
  <div style="float:left; display:inline-block; width:50%;">
    <input type="text">
  </div>
</div>

将Divs调整到宽度

1 个答案: