利用css创建等宽并列按钮

场景

• 在日常开发需求中经常会遇到一些场景，存在并列的两个按钮，如确认与取消，他们的宽度是一样的，并处在同一行
• 一般情况下，我们选择通过定宽要解决这个问题，只要使两个按钮宽度相同，并在外层套一个flex布局的容器即可，如下：

<div class="btns">
    <div class="btn">confirm</div>
    <div class="btn">cancel</div>
</div>

.btns {
    diaplay: flex;
    .btn {
        width: 100px;
    }
}

• 但如果考虑到按钮文本长度不一样的时候，如需要适配多语言的时候，由于不同语言，长度未必相同，都设置100px的话有可能短的文案，按钮显得过长，唱的文案，按钮显得过短，甚至文案比按钮还长，而增加宽度的话又会影响短文案的展示，最终可能需要针对不同语言设置不同宽度

方案

• 考虑不设置宽度的方案，让width随文字宽度自适应，同时又要保证两个按钮的宽度一致的话，可以考虑让父容器宽度等于子元素，然后两个按钮设为display: block使其上下分布，宽度等于100%
• 这样父容器的宽度就会等于最长的那个按钮宽度，然后由于按钮100%的宽度，另一个较短的按钮宽度也会自动等于较长的那个按钮
• 最后通过top right定位，将下面的按钮挪到与第一个按钮平行即可
• 这里需要注意，由于使用了top来移动元素，若top设为百分比，则必须给每个按钮设置一个高度，否则其top必须写成具体数值

• 具体代码如下：

  <div class="btns">
  <div class="btn b1">confirm</div>
  <div class="btn b2">cancel</div>
  </div>
  /////////////////////////////////////////
  .btns {
      display: inline-block;
      position: relative;
      width: auto;
      display: inline-block;
      position: relative;
      width: auto;
      height: 100px;
      line-height: 100px;
      .btn {
          display: block;
          width: 100%;
          position: relative;
          border: 1px solid black;
          text-align: center;
          padding: 0 10px;
      }
      .b2 {
          top: -100%;
          right: calc(-100% - 36px);
      }
  }