爲什麼我的img和搜索欄不在我的導航欄中？

Question

我有一個導航欄和一個圖像和搜索欄，我想要放在導航欄內，最右邊。

我發佈了一個關於這一天的話題，並被告知創建一個容器div並嵌套img和搜索欄，然後將容器浮動到右邊。我試過這樣做，但我仍然有問題。搜索欄與導航欄重疊，而不是位於其中，而且個人資料照片無處可見。我已經包含了一個更詳細的代碼示例，我希望有人能夠找到我在這裏做錯了什麼。

<nav> 
    <ul> 
     <li class="drop"> 
      <div class="user-avatar"> 
       <img src="http://www.b.com/img.ihttp://c3e308.medialib.glogster.com/teebing/media/68/687cc4e9a6c1aeb052c522de735ca61842054334/cookiemonsterface.jpg" alt=""" /> 
      </div> 
     </li> 
    </ul> 
</nav> 


<div id="head-search"> 
    <span>Search</span> 
     <form id="searchform"> 
      <input placeholder="Search"> 
      <input type="button" class="btn"> 
     </form> 
</div> 

http://codepen.io/donnaloia/pen/hlEjs

Answer 1

在 .user-avatar img類

，加float: right;

http://codepen.io/anon/pen/izGhg