如何在同一行上制作两个浮动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