Question

我正在尝试实现一个类似于：在一行上搜索（gif）：TextBox：AjaxLoader（gif）。

我有以下风格：

<div>           
        <img src='<%= VirtualPathUtility.ToAbsolute("~/Content/Images/search.gif")%>' alt="Search"/>&nbsp            
        <%= Html.TextBox("SearchTextBox", string.Empty, new { style = "float:left;" })%>   
        <div id="LoadingGif" style="float:left;"></div>    
        <div style="clear:both;"></div>      
</div>

搜索图像在一行上，文本框和加载的gif出现在下一行。

有人可以帮忙吗？

提前致谢

Answer 1

最后两个元素向左浮动，但搜索gif不是。

Answer 2

我删除了外部div并将所有元素浮动 - 这是有效的。感谢您的所有帮助+ 1对所有人。

Answer 3

默认情况下，<img />和<input type="text" />将为display:inline，因此不需要float:left。

您可能最好用标签或标签替换<div id="LoadingGif" style="float:left;"></div>：然后您将拥有3个内联元素，这意味着您可以从HTML中删除剩余的<div style="clear:both;"></div>： - ）< / p>

Answer 4

以跨度替换div：

<div>           
        <img src='<%= VirtualPathUtility.ToAbsolute("~/Content/Images/search.gif")%>' alt="Search"/>&nbsp            
        <%= Html.TextBox("SearchTextBox", string.Empty, new { style = "float:left;" })%>   
        <span id="LoadingGif" style="float:left;"></span>    
        <span style="clear:both;"></span>      
</div>

会工作......

CSS问题 - 试图让HTML元素保持在一条线上

4 个答案: