感谢您在这里的出色工作。
我很难在 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/
非常感谢前端开发社区的帮助,请原谅我的新手问题。
最佳答案
您可以将 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 中并排对齐 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43359463/