无法对齐按钮

Question

我制作了一个非常简单的用户界面，我有一些不同文本的按钮。我需要按钮设置高度和宽度。问题是，当button上的文字换行时，按钮停止与第一个按钮对齐。

这是我能提出的最简单的例子。

＆＃13;

＆＃13;

button {
    height: 45px;
    width: 120px;
}

＆＃13;

<button>Short text</button>
<button>Text long enough to use two lines</button>

＆＃13;

＆＃13;

＆＃13;

如果您从CSS中删除height或width，它们会再次对齐，但尺寸会有所不同。我尝试将它们放入容器div并使用height，margin，padding和其他东西，但我无法修复它。

问题：还有其他方法吗？

Answer 1

将vertical-align:top添加到您的CSS规则中：

＆＃13;

＆＃13;

button {
    height: 45px;
    width: 120px;
    vertical-align:top;
}

＆＃13;

<button>Short text</button>
<button>Text long enough to use two lines</button>

＆＃13;

＆＃13;

＆＃13;

默认垂直对齐方式为baseline，因此您可能需要更改此顶部或类似内容以获得所需效果。