css - 带换行符的多行 HTML 输入按钮添加了不需要的边距

Question

我正在编写一个包含大量按钮的“收银机”应用程序。只要按钮值不换行，布局就很好。如果它被换行，按钮之间的边距会搞砸。

(如果只有一行文本，它们会很好地对接。)

按钮是通过循环自定义“饮料”对象的集合生成的:

            foreach (drink d in drinks)
        {
            buttons = buttons + "<input id='" + d.drinkID + "' class='drinkButton " + d.cssClass + "' type='button' value='" + d.name + "' />";
            if ((d.drinkID == 13) || (d.drinkID == 41))
            {
                buttons = buttons + "<input id='0' class='drinkButton spacer' disabled='disabled' type='button' value='' />";
            }
            if (d.drinkID == 17)
            {
                buttons = buttons + "<input id='0' class='drinkButton spacer' disabled='disabled' type='button' value='' /><input id='0' class='drinkButton spacer' disabled='disabled'  type='button' value='' />";
            }

        }

css如下:

input.drinkButton
{
    width:94px;
    height: 67px;
    font-size:1em;
    margin: 0px 6px 6px 0px;
    font-weight:normal;
    white-space: normal;
    padding: 0px;
}

如何让它们正确排列？

Answer 1

哦，我多么讨厌这些小错误/问题。

我的头顶，这是垂直对齐问题吗？

--编辑--

是的，垂直对齐...尝试顶部/底部垂直对齐，然后查看...

input.drinkButton
{
    width:94px;
    height: 67px;
    font-size:1em;
    margin: 0px 6px 6px 0px;
    font-weight:normal;
    white-space: normal;
    padding: 0px;
    vertical-align:bottom;
}