如何在一行中水平对齐表单域？

Question

我试图在水平和一行连接的链接中对齐和调整表单字段的大小。 关于我如何有任何想法？

https://beyondcondo.com/testpage/

Answer 1

在.idx-omnibar-form form上使用display:flex和flex:1; 在其子元素上，如下所示：

 .idx-omnibar-form{ display:flex; align-items:flex-end; } .idx-omnibar-form *{ flex:1; margin-right:5px; } 

 <div class="et_pb_code et_pb_module et_pb_code_0"> <form class="idx-omnibar-form idx-omnibar-extra-form"> <label for="omnibar" class="screen-reader-text" style="display:none">City, Zip Code, Address, or Listing ID</label> <input id="omnibar" class="idx-omnibar-input idx-omnibar-extra-input" type="text" placeholder="City, Zip Code, Address, or Listing ID"> <div class="idx-omnibar-extra idx-omnibar-price-container idx-omnibar-min-price-container"><label>Price Min</label><input class="idx-omnibar-min-price" type="number" min="0"></div> <div class="idx-omnibar-extra idx-omnibar-price-container idx-omnibar-max-price-container"><label>Price Max</label><input class="idx-omnibar-price" type="number" min="0"></div> <div class="idx-omnibar-extra idx-omnibar-bed-container"><label>Beds</label><input class="idx-omnibar-bed" type="number" min="0"></div> <div class="idx-omnibar-extra idx-omnibar-bath-container"><label>Baths</label><input class="idx-omnibar-bath" type="number" min="0" step="0.01" title="Only numbers and decimals are allowed"></div> <button class="idx-omnibar-extra-button" type="submit" value="Search"><i class="fa fa-search"></i><span>Search</span></button> </form> </div> 

Answer 2

我对CSS Flexbox不够了解。 自从它变得可以跨浏览器兼容以来，我就在所有东西上都使用了它，并且我差不多一年都没有写过float 。

如果这是我的项目，则将flex添加到父容器（在您的代码中，父容器为<form> ），以将所有子级内联在一起。 您还可以使用其他flex属性来调整其在父容器中的位置。 在下面的示例中，我选择了justify-content:space-between将孩子散布开来，以便他们走到角落。 如果您希望它们居中，则可以选择justify-content:center ！ Flex还允许您垂直调整。 在这里，我选择了align-items:stretch以便所有子div的高度与最高的同级兄弟相同。

然后，您需要做的就是在子div中对齐内容。 您也可以根据需要灵活调整！

在此处阅读有关flex的更多信息： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

 .parent{ display:flex; justify-content:space-between; align-items:stretch; } .child{ flex: 0 0 20%; background-color:black; color:white; text-align:center; padding:2em; } 

 <div class="parent"> <div class="child"> 1 </div><!-- child --> <div class="child"> 2 </div><!-- child --> <div class="child"> 3 </div><!-- child --> </div><!-- parent -->