使用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将文本浮动到右侧，以便圆/椭圆和文本之间的空间可以根据圆的宽度而变化。