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

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

1 个答案: