html - 使用 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-9 像素边距不匹配 - 只是一个示例。改变圈内的内容，看看差距如何变化。

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