等宽的垂直按钮 [英] Vertical buttons with equal width

问题描述

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

It's two vertical arrangement buttons. I need them to be of equal width. I don't know:

• 将要包装的大小；
• 按钮上将显示什么文本(因此我不能使用像素宽度)；
• 按钮上的宽度是多少.

按钮必须在左侧.按钮上的文本必须居中对齐.我不能使用100％的宽度，因为它不会美观:)

Buttons must be at left. Text on buttons must be center-aligned. I can't use 100% width cause it will not beauty :)

我不能使用flexbox并为按钮指定宽度.并且在纯CSS上将是一个很棒的解决方案.

I can't use flexbox and specify width to buttons. And will be cool a solution on pure 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％的宽度，这样它们将采用最大按钮的宽度:

Just make the container inline-block and then the buttons 100% width, that way they will take the width of the largest button:

.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>

这篇关于等宽的垂直按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！