CSS問題 - 試圖讓HTML元素停留在同一行上

Question

我正試圖實現一個layourt，例如：在一行上搜索（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> :-)

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> 

會工作......