Многострочная кнопка ввода 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

О, как я ненавижу эти маленькие ошибки/проблемы.

в верхней части головы, это вопрос с вертикальным выравниванием ?.

--EDIT--

да, вертикальные выравнивания ... попробуйте верхний/нижний вертикальный выравнивать, а затем увидеть ...

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