关于css:利用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);
      }
  }