如何在一行中水平對齊表單域？

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 -->