Conserver les éléments sur la même 'ligne' horizontale

Question

J'ai le div suivant dans une page, mais le bouton est rendu en dessous de l'entrée, bien qu'il y ait beaucoup de place pour eux tous deux dans la même rangée que je le souhaite. Comment puis-je forcer ce problème de «même rangée»?

<div id="pageHeader" style="text-align: right;"> 
    <asp:TextBox ID="searchInput" runat="server" CssClass="searchTerm"> 
    </asp:TextBox> 
    <asp:Button ID="searchButton" runat="server" CssClass="btn" Text="Search" onclick="searchButton_Click" /> 
</div> 

NOUVEAU: Cette question est due au fait que j'utilise telerik ajax ici, et avait inclus searchInput comme un contrôle mis à jour dans les paramètres de mon ajax RadAjaxManager. Ce contrôle "enveloppe" tous ses contrôles mis à jour dans les divs affichés par bloc par défaut. Je viens de passer outre cette valeur par défaut comme suit:

protected void ajaxManager_AjaxSettingCreating(object sender, Telerik.Web.UI.AjaxSettingCreatingEventArgs e) 
{ 
    e.UpdatePanel.RenderMode = UpdatePanelRenderMode.Inline; 
} 

Answer 1

Par défaut, les éléments d'entrée rendent avec affichage: en ligne, ce qui les fait apparaître dans la ligne :) Cependant, dans votre cas, il semble que quelque chose se brise le comportement par défaut , vous aurez donc besoin de spécifier explicitement que vous voulez afficher: inline au lieu de display: block. Donc, pour résumer:

Vous pouvez utiliser le CSS suivant pour obtenir la vue souhaitée:

#pageHeader input 
{ 
    display:inline !important; 
} 

Answer 2

Merci beaucoup pour le code. Ça a bien marché. Telerik Ajaxmanager était le problème.

protected void ajaxManager_AjaxSettingCreating(object sender, Telerik.Web.UI.AjaxSettingCreatingEventArgs e) 
{ 
    e.UpdatePanel.RenderMode = UpdatePanelRenderMode.Inline; 
} 

Answer 3

Vous pouvez également modifier votre existant div être un aspic:

<asp:Panel id="pageHeader" runat="server" CssClass="righty"> 
    <asp:TextBox ID="searchInput" runat="server" CssClass="searchTerm"> 
    </asp:TextBox> 
    <asp:Button ID="searchButton" runat="server" CssClass="btn" Text="Search" onclick="searchButton_Click" /> 

Cela peut: Panel qui est mise à jour par la RadAjaxManager (plutôt que le contrôle individuel (s)) Résultat: un contrôle supplémentaire est affiché, ce qui est légèrement moins performant, mais je pense que cela améliore quelque peu la lisibilité.