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