Align horizontally form containing select-CodePudding

<div >
<form  action="https://homirent.cloudbeds.com/#/" method="get">
<p > City: <select name="city">
<option value="all">All Cities</option>
<option>Cancún</option>
<option>Ciudad De México</option>
<option>Santiago De Querétaro</option>
</select>
Check-In:
<input type="text" name="check_in" placeholder="01/01/2023"/>
Check-Out:
<input type="text" name="check_out" placeholder="02/01/2023"/>
  <input type="submit" /> </p>
</form>
</div>

`` We would like to be able to align these forms that contain checkboxes horizontally like the following example: enter image description here

Tried using display: inline-block on selects instead of float: left however not all elements lined up as expected

CodePudding user response：

You can wrap every form element in another class and then use display: inline-block

Check this out https://jsfiddle.net/rx4hvn/3Ldp90e6/

  <div >
    <label>City</label>
    <select name="city">
      <option value="all">All Cities</option>
      <option>Cancún</option>
      <option>Ciudad De México</option>
      <option>Santiago De Querétaro</option>
    </select>
  </div>

.form-control {
  display: inline-block;
}

CodePudding user response：

You can use the flex property to align the elements in your form horizontally. The flex property is a shorthand for the flex-grow, flex-shrink, and flex-basis properties, which together define the behavior of a flex container and its children.

Here is an example of how you can use the flex property to align the elements in your form horizontally:

<div >
  <form  action="https://homirent.cloudbeds.com/#/" method="get">
    <p >
      City: 
      <select name="city" style="flex: 1;">
        <option value="all">All Cities</option>
        <option>Cancún</option>
        <option>Ciudad De México</option>
        <option>Santiago De Querétaro</option>
      </select>
      Check-In:
      <input type="text" name="check_in" placeholder="01/01/2023" style="flex: 1;"/>
      Check-Out:
      <input type="text" name="check_out" placeholder="02/01/2023" style="flex: 1;"/>
      <input type="submit" />
    </p>
  </form>
</div>

The flex: 1; value on each element tells the container to distribute the available space evenly among the elements. This will cause the elements to align horizontally.

Alternatively, you can use the display: inline-block property on the elements to align them horizontally. The display: inline-block property causes an element to be displayed as an inline element (on the same line as surrounding content), but with the added behavior of treating the element as a block-level element, so that you can apply dimensions, padding, and margin to it.

It is generally a good idea to use CSS styles to control the layout and appearance of your HTML elements, rather than hard coding the 'style' property, but I used it to make things easier to understand. Either of these approaches should allow you to align the elements in your form horizontally.