在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

将该行添加到每个块样式属性     浮动：左;

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

Form是一个像div一样的块级元素。

我在这里用补救措施分配你的小提琴：Fiddle

我简单地补充道：

form { display: inline-block; }

到css，输入显示为内联。

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

希望这有帮助