在div中并排对齐块

Question

感谢您在这里的出色工作。

我很难在div中并排对齐块。 我知道它不是那么复杂，但是我只是找不到一个很好的方法来做……

HTML在这里：

<div class="test">
   test
   <div class="container">
      <div class="row">
         <div id="header_logo"></div>
         <div id="tmsearch" class="clearfix">
            <span class="btn-toogle active"></span>
            <form id="tmsearchbox">
               <input name="controller" value="search" type="hidden">
               <input name="orderby" value="position" type="hidden">
               <input name="orderway" value="desc" type="hidden">
               <input class="tm_search_query form-control ac_input" id="tm_search_query" name="search_query" placeholder="What are you shopping for today ?" value="" autocomplete="off" type="text">
            </form>
            <button class="submit-buttons" id="search-bar-button" type="submit">Search</button>
         </div>
      </div>
   </div>
</div>

JSiddle在这里https://jsfiddle.net/x7juoq64/6/

我会感谢前端开发人员社区的一些帮助，请原谅我的新手问题。

Answer 1

您可以将display: flex添加到具有要并行显示的子元素的任何父元素。

 .flex { display: flex; } 

 <div class="test flex"> test <div class="container"> <div class="row"> <div id="header_logo"></div> <div id="tmsearch" class="clearfix flex"> <span class="btn-toogle active"></span> <form id="tmsearchbox" class="flex"> <input name="controller" value="search" type="hidden"> <input name="orderby" value="position" type="hidden"> <input name="orderway" value="desc" type="hidden"> <input class="tm_search_query form-control ac_input" id="tm_search_query" name="search_query" placeholder="What are you shopping for today ?" value="" autocomplete="off" type="text"> </form> <button class="submit-buttons" id="search-bar-button" type="submit">Search</button> </div> </div> </div> </div> 

Answer 2

将该行添加到每个块样式属性float：left;

Answer 3

像这样？

 #search-bar-button, .tm_search_query { float: left; } 

 <div class="test"> test <div class="container"> <div class="row"> <div id="header_logo"></div> <div id="tmsearch" class="clearfix"> <span class="btn-toogle active"></span> <form id="tmsearchbox"> <input name="controller" value="search" type="hidden"> <input name="orderby" value="position" type="hidden"> <input name="orderway" value="desc" type="hidden"> <input class="tm_search_query form-control ac_input" id="tm_search_query" name="search_query" placeholder="What are you shopping for today ?" value="" autocomplete="off" type="text"> </form> <button class="submit-buttons" id="search-bar-button" type="submit">Search</button> </div> </div> </div> </div> 

Answer 4

表单是类似于div的块级元素。

我有一个补救这里分叉的小提琴： 小提琴

我只是添加：

form { display: inline-block; }

到CSS，您的输入将内联显示。

更新*注意：display：flex目前较少受浏览器支持。 W3CSchools

希望这可以帮助