等宽的垂直按钮

Posted 2023-03-06

【中文标题】等宽的垂直按钮

【英文标题】：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 回答是否解决了您的问题？如果是这样，请使用投票箭头下方的勾号接受他的回答

【参考方案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！

【讨论】：

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