搜索不會坐在導航旁

我有一個水平菜單，並希望放置一個搜索表單與它一致，但它顯示左對齊在一個新的線..我是新來的HTML，所以只是學習的基礎知識（工作在我的第三個網站上，真的得到了CSS的懸念）。搜索不會坐在導航旁

<div id="nav"> 
    <span class="nav"> 
     <a href="#" alt="$"><span id="jqFade"><img src="images/skydevUpperNav.png"></span></a> 
     <a href="#" alt="$"><span id="jqFade"><img src="images/goftbUpperNav.png"></span></a> 
     <a href="#" alt="$"><span id="jqFade"><img src="images/genUpperNav.png"></span></a> 
     <span id="searchBox"> 
      <form action="#" method="get">Search 
       <input type="text" name="searchGoogle" size="12" maxlength="45" /> 
      </form> 
     </span> 
</div>

來源

2013-04-05 user2237852

您可以發佈一些代碼來顯示您正在嘗試的功能嗎？ – metadept 2013-04-05 01:05:50

你還需要發佈你的css – 2013-04-05 01:07:10

只是一個提示：我想你錯過了''。此外：''是一個內聯元素，不允許是像'

使用display: inline-block;

工作小提琴：

http://jsfiddle.net/wN6Ae/1/

CSS：

searchBox{ 
    display: inline-block; 
    margin-left: 10px; 

}

來源

2013-04-05 01:09:11

表單元素呈現爲block默認情況下，所以你需要設置搜索框的形式爲display: inline-block;。在跨度中包裝塊元素不是有效的解決方案，因爲它不會改變包含的元素的呈現方式。

的jsfiddle演示：http://jsfiddle.net/Bf46a/

來源

2013-04-05 01:09:29 metadept

實際上它不僅無效（可以用'display：block'覆蓋），它是無效的。 – 2013-04-05 01:19:58

你應該使用<ul>與<li>標籤導航和float:left;列表元素跨越是不是很好。設置list-style-type: none;如果你不顯示列表樣式。 <img>也應該關閉 - ><img .... />

來源

2013-04-05 01:13:15 di3

搜索不會坐在導航旁

回答

相關問題