javascript - 在div中并排对齐块

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

我很难在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/

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

最佳答案

您可以将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>

关于javascript - 在div中并排对齐块，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43359463/