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>

新：这个问题是因为我在这里使用了telerik ajax，并且在我的RadAjaxManager的ajax设置中包含了searchInput作为更新控件。默认情况下，此控件在块显示的div中“包装”其所有更新的控件。我只需要覆盖此默认值，如下所示：

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

Answer 1

默认情况下，输入元素使用display：inline渲染，这使得它们显示在行:)但是，在您的情况下，似乎某些东西违反了默认行为，因此您需要明确指定您想要显示：inline而不是显示：块。所以，总结一下：

您可以使用以下CSS获取所需的视图：

#pageHeader input
{
   display:inline !important;
}

Answer 2

非常感谢您的代码。它运作得很好。 Telerik Ajaxmanager就是问题所在。

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

Answer 3

您还可以将现有div更改为asp：由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" />

这可能导致额外的控制被回发 - 因此性能稍差 - 但我认为它在某种程度上提高了可读性。

将元素保持在相同的水平“行”上

3 个答案: