5

たくさんのボタンがある「まで」のアプリを書いています。ボタンの値が折り返されない限り、レイアウトは問題ありません。新しい行に折り返すと、ボタン間の余白がねじれてしまいます。

ここに画像の説明を入力してください

（テキストが1行しかない場合は、うまく突き合わされます。）

ボタンは、カスタムの「飲み物」オブジェクトのコレクションをループすることによって生成されます。

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

それらを正しく整列させるにはどうすればよいですか？

4

1 に答える 1

8

ああ、私はこれらの小さなバグ/問題をどのように嫌いますか。

私の頭のてっぺんの、それは垂直方向の整列の問題ですか？

- 編集 -

うん、垂直整列...上/下垂直整列を試してから...

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;
}
于 2012-06-05T20:55:46.443 に答える