如何在同一行上创建两个浮动div元素？

我想在同一行上创建两个元素，一个向左浮动，另一个向右浮动。第一个是基本文本，第二个是搜索框（它有一个CSS，但我不会在这里包含）。它们都正确对齐，但搜索框是文本下方的一行。非常感谢您的帮助。如何在同一行上创建两个浮动div元素？

 <div id="outer" style="width:100%"> 
    <div id="inner"> 
    <div class="toolbar-wrapper wrapper"> 
    <div class="toolbar span12 clearfix"> 
    <ul class="unstyled"> 
     <div id=123A style="float: left; text-align: left;">MADE WITH ♡ IN CANADA ― EST. 2014</div> 
     <div id=123B style="float: right; text-align: right;"> 
     <li class="search-field fl"> 
     <form class="search" action="/search"> 
      <input type="image" src="http://cdn.shopify.com/s/files/1/0682/0041/t/1/assets/icon-search.png?56" alt="Go" id="go"> 
      <input type="text" name="q" class="search_box" placeholder="Search" value="{{ search.terms }}" /> 
     </form> 
     </li> 
     </div> 
    </ul> 
</div> 
    </div> 
</div> 
     </div>

来源

2014-11-08 Saylon Slade

对我来说，它显示正确的位置，你想要的。可能你左边的文字太长了。您可以同时提供width: 50%，以便解决问题：jsfiddle

来源

2014-11-08 23:04:47

如何在同一行上创建两个浮动div元素？

回答

相关问题