垂直按钮宽度相等

Question

这是两个垂直排列按钮.我需要它宽度会一样.我没有:

• 包裹的尺寸是多少;
• 按钮上的文字是什么(因此我不能使用像素宽度);
• 按钮上的宽度是多少.

按钮必须在左边.按钮上的文字必须是中心对齐.我不能使用100%宽度因为它不会美丽:)

我不能使用flexbox并指定按钮的宽度.并且很酷的纯CSS解决方案.

IE8 +

.wrap{
    width: 100%;
    border: 1px solid red;
}

.btn{
    height 40px;
    background-color: tomato;
    margin-bottom: 10px;
    display: block;
}

<div class="wrap">
  <button class="btn">small button</button>
  <button class="btn">super long button</button>
</div>

Answer 1

只需使容器内嵌块然后按钮100%宽度,这样他们将采取最大按钮的宽度:

.wrap{
    display: inline-block;
    border: 1px solid red;
}

.btn{
    height 40px;
    background-color: tomato;
    margin-bottom: 10px;
    display: block;
    width:100%;
}

<div class="wrap">
  <button class="btn">small button</button>
  <button class="btn">super long button</button>
</div>