Держите элементы на одной горизонтальной строке

Question

У меня есть следующий div на странице, но кнопка отображается под входом, несмотря на то, что у них достаточно места для них в той же «строке», как и я. Как я могу заставить эту проблему "той же строки"?

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

NEW: Эта проблема была связана с тем, что я использую Telerik Ajax здесь, и включил searchInput в качестве обновленного элемента управления в настройках AJAX моего RadAjaxManager. Этот элемент управления «оборачивает» все свои обновленные элементы управления в блок, отображаемый по умолчанию. Я просто должен был переопределить это значение по умолчанию следующим образом:

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

Answer 1

По умолчанию входные элементы отображаются с display: inline, что заставляет их отображаться в строке :) Однако в вашем случае кажется, что что-то нарушает поведение по умолчанию, поэтому вам нужно будет явно указать, что вы хотите display: inline вместо дисплея: блок. Итак, подведем итог:

Вы можете использовать следующий CSS для получения желаемого вида:

#pageHeader input
{
   display:inline !important;
}

Answer 2

Вы также можете изменить существующий div на asp: Panel, которая обновляется RadAjaxManager (а не отдельными элементами управления):

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

Это может привести к тому, что дополнительный элемент управления будет отправлен обратно - и, следовательно, немного хуже по производительности - но я думаю, что это несколько улучшает читабельность.

Answer 3

Большое спасибо за код. Это работало отлично. Telerik Ajaxmanager был проблемой.

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