等宽垂直按钮

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

只需将容器 inline-block 和按钮设为 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！

等宽垂直按钮

Vertical buttons with equal width

css

button

width