top alignement vertical dans

Question

css Voici mon code

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

Je voudrais que tous les trois éléments à la ligne tout simplement en haut. Est-ce faisable?

ÉDITÉ: code source (rendu) est

<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

Essayez de donner l'attribut vertical-align: text-top à votre bouton. CSS:

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

Ou ajouter VerticalAlign="Top" à votre contrôle ImageButton (ne sais pas comment ce dernier se traduit par CSS).

Answer 2

Avez-vous essayé vertical-align: top; (pour l'élément en ligne uniquement) Cela ne fonctionne pas avec un élément de niveau bloc comme div. Ainsi, la solution est définie une largeur fixe pour l'élément div et display: inline; Il a également besoin d'une valeur de hauteur.

Answer 3

Essayez le style de vos css comme ceci:

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

Answer 4

J'utilise habituellement

display: inline-block; 

dans cette situation. Cela devrait amener la mise en page à respecter

vertical-align: top; 

règles.

Ceci est similaire à la solution table-cell de @Jason Ellis, mais plus sémantique puisqu'il ne s'agit pas d'une table.