如何获得一个窗体并排到一个div

Question

我正在构建一个菜单，向下滚动页面，例如Facebook的菜单，但我有麻烦，表单似乎在div下，我试着做向左浮动，但它仍然不起作用，我想使它们全部排成一行..我做错了什么？

这里是我的代码

<div id="topnav"> 


<div id="nav"> 
<a href="../index"><img src="/img/putlockermedia_logo.png" /></a> 

<a href="../Shows"><input type="button" name="button" id="button" value="Shows" /></a> 

<a href="../movies"><input type="button" name="button" id="button" value="movies" /></a> 

<form action='/search.php' method='GET'> 
<input id='searchbar' type='text' size='65' name='search' placeholder="search for movies & tv shows"> 
<input id='submit' type='submit' name='submit' value='Search' > 
</form> 

</div> 


</div> 

这里是它的完整的CSS :)

<style> 
    #topnav{ 
    background-color: #999; 
    height: 45px; 
    width: 100%; 
    position: fixed; 
    left:0px; 
    top: 0px; 
} 
    #nav{ 
     margin-left: 10px; 

     } 

    </style> 

Answer 1

添加的包装股利形式和漂浮正确

<div id="topnav"> 


<div id="nav"> 
<a href="../index"><img src="/img/putlockermedia_logo.png" /></a> 

<a href="../Shows"><input type="button" name="button" id="button" value="Shows" /></a> 

<a href="../movies"><input type="button" name="button" id="button" value="movies" /></a> 

    <div id="right"> 
<form action='/search.php' method='GET'> 
<input id='searchbar' type='text' size='65' name='search' placeholder="search for movies & tv shows"> 
<input id='submit' type='submit' name='submit' value='Search' > 
</form> 
    </div> 

</div> 


</div> 

CSS

<style> 
#topnav{ 
    background-color: #999; 
    height: 45px; 
    width: 100%; 
    position: fixed; 
    left:0px; 
    top: 0px; 
} 
#nav{ 
    margin-left: 10px; 
} 
#right { 
    float:right 
} 
</style> 

Answer 2

是的，你必须使用float:left; width:50%;的形式div

检查里面的fiddle link样品