移动端CSS实现按钮组标题独立占位、-0+按钮等间距排布问题

原提问内容 #

我想要调整的内容：

以下是我目前承载这些单选按钮的完整CSS和HTML代码，内部形状的CSS代码位于第8676行，外部形状的CSS代码位于第4565行：

.me-2 {
  justify-content: space-between;
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

.btn-toolbar {
  justify-content: space-between;
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups" style="text-align: right; margin-bottom: 7px;">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary" onclick="window.location.href='https://www.bestbuy.ca/en-ca/search?path=soldandshippedby0enrchstring%253ABest%2BBuy&search=officejet+pro';">Demos - OJ Pro</button>
    <button type="button" class="btn btn-secondary">-</button>
    <button-disabled type="button" class="btn btn-secondary">0</button-disabled>
    <button type="button" class="btn btn-secondary">+</button>
  </div>
</div>

我发现如果调整外部形状的尺寸，点击内部按钮（例如+按钮）时，其形状会和外部形状不一致。我想要实现以下效果，请问该如何操作：

1. (-)、(0)、(+)按钮在胶囊形状右侧对齐，内部间距均匀，为尺寸相同的正方形按钮。
2. 标题（即Demos - OJ Pro）左对齐，不会破坏-、0、+按钮的间距和对齐效果，标题到右侧按钮的区域可设置为固定尺寸/间距。

此外无需适配桌面端格式，该Web应用仅在移动端使用。

我知道当前块的“标题”和-、+、0按钮使用了相同的CSS样式，请问有没有办法实现上述需求？

你可以通过拆分容器、单独定义控制按钮样式的方式实现需求，修改后的代码如下：

/* 保留原有样式的基础上新增/覆盖以下样式 */
.btn-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 可自定义整体容器的左右内边距 */
  padding: 0 12px;
  /* 可自定义标题和右侧按钮组的间距 */
  gap: 20px;
}

.title-btn {
  /* 标题按钮不需要额外修改尺寸，内容自适应即可 */
  flex-shrink: 0;
}

.control-btn-group {
  display: flex;
  /* 右侧按钮组之间的间距可自定义 */
  gap: 4px;
  flex-shrink: 0;
}

.control-btn {
  /* 移动端固定尺寸，保证是正方形，可按需调整数值 */
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups" style="margin-bottom: 7px;">
  <!-- 标题按钮单独放一个容器 -->
  <button type="button" class="btn btn-secondary title-btn" onclick="window.location.href='https://www.bestbuy.ca/en-ca/search?path=soldandshippedby0enrchstring%253ABest%2BBuy&search=officejet+pro';">Demos - OJ Pro</button>
  <!-- 右侧控制按钮单独成组 -->
  <div class="control-btn-group" role="group" aria-label="Control group">
    <button type="button" class="btn btn-secondary control-btn">-</button>
    <button-disabled type="button" class="btn btn-secondary control-btn">0</button-disabled>
    <button type="button" class="btn btn-secondary control-btn">+</button>
  </div>
</div>

改动说明 #

• 拆分了原有的按钮组，把标题按钮和右侧控制按钮分成两个独立部分，避免共用样式导致互相影响，调整外部容器尺寸时不会改变控制按钮的形状
• 给右侧控制按钮设置了固定宽高，保证三个按钮都是等大的正方形，按钮之间的间距可以通过gap属性自定义
• 工具栏默认实现了标题左对齐、控制按钮右对齐的效果，两者之间的间距可以直接调整.btn-toolbar的gap属性，不会破坏右侧按钮的布局
• 仅针对移动端适配，所有固定尺寸可以根据你的设计需求直接调整数值即可。

内容的提问来源于stack exchange，提问作者Usama Saleem