如何每行显示两个圆形按钮，并在其上方居中显示一个按钮，而不与下方两个按钮间隔，反之亦然？

Question

如何让左边的按钮和右边的一样显示？各个组用 padding 分隔，并用 flow-root 显示。

.group {
  display: flow-root;
  padding: 7px 0px 7px 0px;
}

button.a {
  float: left;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #8B8B8B;
}

<div class="group"><span>
      <button class="a"></button>
    </span><span>
      <button class="a"></button>
      <button class="a"></button>
    </span><span>
      <button class="a"></button>
      <button class="a"></button>
    </span>
</div>

<div class="group"><span>
      <button class="a"></button>
      <button class="a"></button>
    </span><span>
      <button class="a"></button>
    </span>
</div>

Answer 1

有很多方法可以做到这一点，这里是一种简单的方法，无需更改 html

编辑：由于您的圈子通常不会触及边界，因此您需要手动将它们推向目的地

.group {
  float: left;
  padding: 7px 0px 7px 0px;
  clear: both;
}

span {
  display: flex;
  text-align: center;
  justify-content: center
}

button.a {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #8B8B8B;
}
.move-up {
  margin-top: -3px;
}

<div class="group"><span>
      <button class="a"></button>
    </span><span class="move-up">
      <button class="a"></button><button class="a"></button>
    </span><span>
      <button class="a"></button><button class="a"></button>
    </span>
</div>

<div class="group"><span>
      <button class="a"></button><button class="a"></button>
    </span><span>
      <button class="a move-up"></button>
    </span>
</div>

如何每行显示两个圆形按钮，并在其上方居中显示一个按钮，而不与下方两个按钮间隔，反之亦然？

How can two round buttons be displayed per line and a single one above it centered without spacing to the lower two and vice versa?

html

css

center

button

css-selectors