css - 使 Div 适合宽度

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

在 h5 和 input 元素上添加一个 width: 100%; 应该让它们填充它们的父元素:

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

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

您可以通过将 display:inline-block; 添加到它们的样式中并排对齐这些 div，然后应用宽度(大约 50%):

<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>