如何在同一行上創建兩個浮動div元素？

Question

我想在同一行上創建兩個元素，一個向左浮動，另一個向右浮動。第一個是基本文本，第二個是搜索框（它有一個CSS，但我不會在這裏包含）。它們都正確對齊，但搜索框是文本下方的一行。非常感謝您的幫助。

 <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> 

Answer 1

對我來說，它顯示正確的位置，你想要的。可能你左邊的文字太長了。您可以同時提供width: 50%，以便解決問題：jsfiddle