Question

我正在尝试在div内添加的创建徽章效果的任何内容周围画一个圆圈（而不是椭圆形）。我希望尺寸根据内容是动态的，我只想使用CSS。这可能吗？我的物品在下面。

.a-circle-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 10px solid;
  border-radius: 50%;
  padding: 30px;
  margin-top: 20px;
  font-size: 30px;
}

<div class="a-circle-badge"><span>2200</span></div>

Answer 1

您可以使用伪元素来使height等于width的元素，方法是使用padding-top以百分比表示（请注意，填充是相对于元素的宽度）。

我也正在使用inline-flex容器，以便元素的宽度与其内容一样多-请参见下面的演示

.a-circle-badge {
  display: inline-flex; /* <-- inline flex container */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 10px solid;
  border-radius: 50%;
  padding: 30px;
  margin-top: 20px;
  font-size: 30px;
}

.a-circle-badge span {
  display: flex;
  justify-content: center;
  align-items: center;
}

.a-circle-badge span::before {
  content: '';
  padding-top: 100%; /* <-- will create height = width */
}

<div class="a-circle-badge"><span>2200</span></div>
<div class="a-circle-badge"><span>Some text here</span></div>

如何将min-height属性设置为动态宽度

1 个答案: