Вертикально выровнять верх в css

Question

Вот мой код

<div style="margin:0;padding:0;vertical-align:text-top; border:1px solid red;float:right;">
     <span>Key:</span>
     <asp:TextBox ID="tbKey" MaxLength="16" runat="server" ></asp:TextBox>
     <asp:ImageButton ID="btnRefresh" runat="server" imageUrl="_img/btn_submit.gif" Height="22" Width="52" />
</div>

Я бы хотел, чтобы все три элемента просто располагались вверху. Это выполнимо?

Редакция: Исходный код (отображается):

 <div style="margin:0;padding:0;vertical-align:text-top; border:1px solid red;float:right;">
                <span>Key:</span>
                <input name="tbKey" type="text" maxlength="16" id="tbKey" />

                <input type="image" name="btnRefresh" id="btnRefresh" src="_img/btn_submit.gif" style="height:22px;width:52px;border-width:0px;border-width:1px;" />

            </div>

Answer 1

Я обычно использую

 display: inline-block;

в этой ситуации.Это должно заставить макет соблюдать правила

vertical-align: top;

.

Это похоже на решение table-cell @Jason Ellis, но более семантическое, поскольку это не таблица.

Answer 2

Вы пробовали vertical-align: top; (только для встроенного элемента) Это не работает с элементом уровня блока, таким как div. Итак, для решения задана фиксированная ширина элемента div и display: inline;. Также необходимо значение высоты.

Answer 3

Попробуйте оформить ваш CSS следующим образом:

div{
  display: table-cell;
  vertical-align: top;
}

Answer 4

Попробуйте присвоить атрибуту vertical-align: text-top вашей кнопке.В CSS:

#btnRefresh
{
    vertical-align: text-top;
}

Или добавьте VerticalAlign="Top" к элементу управления ImageButton (не уверен, как этот последний переводит в CSS).