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

Question

I am trying to align and resize the form fields in the link attached horizontally and in one line. Any ideas on how I could ?

https://beyondcondo.com/testpage/

Answer 1

Use display:flex on .idx-omnibar-form form and flex:1; on its children elements as shown below:

 .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

I cannot preach enough about css flexbox. Since it has become cross-browser compatible I have been using it on everything and I haven't written float in almost a year.

If this were my project I would add flex to the parent container (in your code the parent is <form> ) to get all of the children inline together. There are also other flex attributes you can use to adjust their positioning within the parent container. In the example below I have chose justify-content:space-between to spread the children out so they go right to the corners. If you wanted them centered you could choose justify-content:center ! Flex also lets you adjust vertically. Here I have chosen align-items:stretch so that all of the child divs are the same height as the tallest sibling.

Then all you need to do is align the content inside of the child divs. You can flex those too if you want!

Read more about flex here: 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 -->