如何在每行中显示两个圆形按钮，并在其上方显示一个单一的按钮而居中，而与下两个按钮之间没有间距？

问题描述

左侧的按钮如何像右侧一样显示？各个组之间用填充分隔，并以流根显示。

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

解决方法

执行此操作的方法很多，这是一种无需更改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>