场景
- 在日常开发需要中常常会遇到一些场景，存在并列的两个按钮，如确认与勾销，他们的宽度是一样的，并处在同一行
- 个别状况下，咱们抉择通过定宽要解决这个问题，只有使两个按钮宽度雷同，并在外层套一个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); }}