带换行符的多行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

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

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

- 编辑 -

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

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;
}