CSS按钮样式调整求助：时钟图标布局与分隔边框设置

开发者阿泽

2026-5-19

解决方案：按钮布局与样式调整

没问题！我帮你搞定这个按钮样式，完全符合你的需求——时钟图标放在绿色区域右侧，下方居中显示“20 sec”，同时在文本/图标左侧加上白色分隔边框。

实现思路

把按钮内部拆分为左侧内容区、白色分隔线、右侧图标文字区三个部分，用Flex布局实现横向排列
右侧图标文字区用垂直Flex布局，让文字在图标下方居中对齐
分隔线用窄高的元素实现白色竖线效果

完整代码示例

HTML结构

<button class="custom-btn">
  <span class="btn-left">按钮文本</span>
  <div class="divider"></div>
  <div class="btn-right">
    <i class="clock-icon">🕒</i>
    <span class="time-text">20 sec</span>
  </div>
</button>

CSS样式

.custom-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background-color: #2ecc71; /* 绿色背景 */
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.btn-left {
  font-weight: 500;
}

.divider {
  width: 1px;
  background-color: white;
  height: 24px; /* 分隔线高度，匹配按钮内元素高度 */
}

.btn-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.clock-icon {
  font-size: 16px;
}

.time-text {
  font-size: 12px;
}