垂直按钮宽度相等

Question

这是两个垂直排列按钮。我需要它宽度也一样。 我没有：

• 包裹的尺寸;
• 按钮上的文字是什么（因此我无法使用像素宽度）;
• 按钮上的宽度。

按钮必须在左边。按钮上的文字必须是中心对齐。我不能使用100％宽度因为它不会美丽：）

我不能使用flexbox并指定按钮的宽度。对于纯CSS来说，这将是一个很酷的解决方案。

IE8 +

{{1}}

{{1}}

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！