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