Question

我在CSS中还很陌生，但是在stackoverflow上找不到类似的问题。我尝试对单选按钮进行建模，如下图所示：

我已经做到了：

.root {
  display: flex;
}

.checkbox {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border-color: blue;
  border-width: 0.2;
  border-style: solid;

  display: flex;
  justify-content: center;
  align-items: center;
}

.mark {
  width: 1.1rem;
  height: 1.1rem;
  background-color: blue;
  border-radius: 50%;
}

<body>
<div class="root">
  <div class="checkbox">
    <div class="mark"></div>
  </div>
  <div class="checkbox">
    <div class="mark"></div>
  </div>
  <div class="checkbox">
    <div class="mark"></div>
  </div>
  <div class="checkbox">
    <div class="mark"></div>
  </div>
  <div class="checkbox">
    <div class="mark"></div>
  </div>
</div>
</body>

我正在使用带Chrome和Safari的MacBook Pro。

在Chrome上看起来像这样：

在Safari上看起来更好一些，但问题仍然存在（请查看每个图标的底部）。

有人可以帮我解释我在做什么错吗？

Answer 1

首先，如果要固定形状和尺寸。使用px代替em和%，因为它们会根据文档缩放。例如，em等于当前字体大小。由于单位的限制，您遇到了不合规定的情况。有关更多信息，read this article

.root {
  display: flex;
}

.checkbox {
  width: 20px;
  /* fixed width */
  height: 20px;
  /* fixed height */
  border-radius: 50%;
  border-color: blue;
  border-style: solid;
  margin-left: 10px;
  /* fixed left margin to keep every checkbox element a 10px from left to the next one */
  display: flex;
  justify-content: center;
  align-items: center;
}

.mark {
  width: 14px;
  /* fixed width; */
  height: 14px;
  /* fixed height; */
  background-color: blue;
  border-radius: 50%;
}

<body>
  <div class="root">
    <div class="checkbox">
      <div class="mark"></div>
    </div>
    <div class="checkbox">
      <div class="mark"></div>
    </div>
    <div class="checkbox">
      <div class="mark"></div>
    </div>
    <div class="checkbox">
      <div class="mark"></div>
    </div>
    <div class="checkbox">
      <div class="mark"></div>
    </div>
  </div>
</body>

我们现在有固定大小的固定div。我们添加了margin-left，以在每个checkbox元素之间添加间距。如图所示。在div内，mark元素。 flex使内部div垂直对齐，并且您可以通过跨平台支持来实现所需的行为。

您可以编辑这些值以获得所需的结果。
要解决您在以下评论中的问题。这是因为弯曲。为了解决这个问题，我们必须在子级上使用'％'值。因此，它们根据父级缩放，并且伸缩不会干扰。为此，只需将宽度和高度设置为

.root {
  display: flex;
}

.checkbox {
  width: 20px;
  /* fixed width */
  height: 20px;
  /* fixed height */
  border-radius: 50%;
  border-color: blue;
  border-style: solid;
  margin-left: 10px;
  /* fixed left margin to keep every checkbox element a 10px from left to the next one */
  display: flex;
  justify-content: center;
  align-items: center;
}

.mark {
  width: 90%;
  /* fixed width; */
  height: 90%;
  /* fixed height; */
  background-color: blue;
  border-radius: 50%;
}

<body>
  <div class="root">
    <div class="checkbox">
      <div class="mark"></div>
    </div>
    <div class="checkbox">
      <div class="mark"></div>
    </div>
    <div class="checkbox">
      <div class="mark"></div>
    </div>
    <div class="checkbox">
      <div class="mark"></div>
    </div>
    <div class="checkbox">
      <div class="mark"></div>
    </div>
  </div>
</body>

在css中对齐小形状的问题

1 个答案: