使用CSS的動態餘量

Question

我有一個帶有文字和圓圈的標籤。我在圓圈和文字之間給出了9px的右邊距。現在問題是當圓圈大小增加時，我需要將邊距減小到3px。有沒有我可以用CSS做或我需要爲它寫JS。

.circle { 
    border-radius: 11px; 
    width: 22px; 
    height: 22px; 
    margin-right: 9px; 
} 

Answer 1

根據您是否需要它精確到3px或9px到3px之間的任何位置，您可以將您的內容放在正確的absolute位置。通過這種方式，內容將留在圈子擴大或減少放：JS Fiddle

注：實際利潤/像素不匹配所需3-9px利潤率 - 僅僅是一個例子。更改圈子中的內容以查看差距如何變化。

.circle { 
    display: inline-block; 
    border: 1px solid black; 
    border-radius: 50%; 
    margin-right: 9px; 
    padding: 10px; 
    height: 30px; 
    line-height: 30px; 
} 
.rightContent { 
    position: absolute; 
    left: 70px; 
    top: 0; 
    line-height: 70px; 
} 

否則，如果您確實需要邊距爲3px或9px，具體取決於內容，您將需要JS。

Answer 2

首先，我絕對不會使用JavaScript來改變CSS這種方式。我建議使用float: right將文本向右移動，以便圓/橢圓和文本之間的空間可以根據圓的寬度變化。