宽度相等的垂直按钮

Question

这是两个垂直排列按钮。我需要它们具有相等的宽度。我不知道：

• 包装上的尺寸是多少;
• 按钮上会出现什么文本（因此我不能使用像素宽度）;
• 按钮的宽度。

按钮必须位于左侧。按钮上的文本必须居中对齐。我不能使用100%的宽度，因为它不会美:)

我不能使用弹性框并指定按钮的宽度。并且在纯 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>

Answer 2

将inline-block用于您的容器div！