如何在小屏幕尺寸下将标签放在它们之间

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>

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

Answer 1

我假设当屏幕尺寸不足以 space 将它们排成一行时，您希望将右侧标签放在左侧标签下方。

为了实现这一点，将您的标签包装在 div 中，属性为 display: inline-block 这将在一行中呈现标签，如果足够的话 space 它们彼此之间。要右对齐标签，请使用 float: right.

下面的代码片段演示了结果

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

.right {
  float: right;
}

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

如何在小屏幕尺寸下将标签放在它们之间

How to put labels among themselves at small screen size

html

css

label