如何用CSS实现两个对称对齐、占满可用宽度的按钮？

首选Flex布局实现（兼容性支持IE10及以上，覆盖99%以上使用场景） #

HTML 结构示例 #

<div class="btn-wrapper">
  <button class="btn">提交</button>
  <button class="btn">取消</button>
</div>

CSS 代码 #

.btn-wrapper {
  display: flex;
  width: 100%;
  /* 两个按钮之间的间距，可根据设计需求调整数值，不需要间距可删除该行 */
  gap: 12px;
}

.btn {
  /* 核心属性：让按钮平分父容器的可用宽度 */
  flex: 1;
  /* 以下为按钮基础样式，可根据自己的设计规范修改 */
  padding: 8px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

低版本浏览器兼容方案（支持IE9及以下） #

如果需要适配不支持Flex的老旧浏览器，可以用百分比宽度计算实现：

.btn-wrapper {
  width: 100%;
  /* 清除inline-block元素默认的间距 */
  font-size: 0;
}

.btn {
  display: inline-block;
  font-size: 14px;
  /* 无间距的情况下直接写width: 50%即可，以下是保留12px间距的计算方式 */
  width: calc(50% - 6px);
  padding: 8px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

/* 给第一个按钮添加右侧间距 */
.btn:first-child {
  margin-right: 12px;
}

以上两种方案均可实现两个按钮占满父容器全部可用宽度、等宽对称排列的效果。

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