javascript - 在 div 中并排对齐 block

Question

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

我很难在 div 中并排对齐 block 。我知道它没有那么复杂，但我就是找不到一个好的方法......

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>