等宽的垂直按钮答案

【问题标题】：Vertical buttons with equal width等宽的垂直按钮
【发布时间】：2017-06-01 06:50:55
【问题描述】：

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

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

按钮必须在左边。按钮上的文本必须居中对齐。我不能使用 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>

【问题讨论】：

您能解释一下“不能使用 100% 宽度，因为它不会美观”吗？谢谢
如果换行为 1000 像素，则 100% 宽度的按钮也将是 1000 像素。这不是美容设计
啊-您的意思是从设计的角度来看它看起来不太好，公平的评论:) @Pete 回答是否解决了您的问题？如果是这样，请使用投票箭头下方的勾号接受他的回答

标签： css button width

【解决方案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>

【讨论】：

display inline-block 占据了它里面最大元素的宽度，因此，给内部元素一个 100% 的宽度意味着它们都将是容器内最大元素的宽度跨度>

【解决方案2】：

使用inline-block 作为您的容器 div！

【讨论】：

这不是一个真正的答案，在目前的状态下，作为评论可能会更好。请添加更多详细信息和代码示例。