如何在小屏幕尺寸之間放置標籤

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>