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

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。

该片段下面演示结果

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