Question

<div style="margin-top:20px;">
<label class="bold-label">Recommended: </label>
<label class="bold-label" id="rec">20</label>
<label class="bold-label pull-right" id="resp">80</label>
<label class="bold-label pull-right">Response: </label>
</div>

这在大屏幕上看起来很好（即推荐：左边20和响应：右边80）但是随着屏幕变小，它会破碎。如果屏幕变小以适应它们，我想在不同的行上显示推荐和响应。

Answer 1

我认为当屏幕尺寸没有足够的空间将它们呈现在一行中时，您希望在左侧标签下方放置正确的标签。

为了实现将标签包装在具有属性display: inline-block的div中，这将使标签呈现在一行中，如果它们具有足够的空间，则它们彼此之间。要正确对齐标签，请使用float: right。

下面的代码段演示了结果

＆＃13;

.inline-block {
  display: inline-block;
}

.right {
  float: right;
}

＆＃13;

<div>
  <div class="inline-block">
    <label>Recommended: </label>
    <label id="rec">20</label>
  </div>
  <div class="right inline-block">
    <label id="resp">Response: </label>
    <label>80</label>
  </div>
</div>

＆＃13;

如何在小屏幕尺寸下放置标签

1 个答案: