css 水平对齐包含选定内容的窗体

mwngjboj 于 2022-12-05 发布在其他

关注(0)|答案(1)|浏览(110)

<div class="container">
<form class="horizontal" action="https://homirent.cloudbeds.com/#/" method="get">
<p class="p1"> 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>

''我们希望能够像下面的例子一样水平对齐这些包含复选框的表单：enter image description here
尝试在选择时使用display: inline-block而不是float: left，但并非所有元素都按预期对齐

css

来源：https://stackoverflow.com/questions/74658358/align-horizontally-form-containing-select

1条答案

按热度按时间

vdgimpew1#

您可以将每个表单元素 Package 在另一个类中，然后使用display: inline-block
看看这个https://jsfiddle.net/rx4hvn/3Ldp90e6/

<div class="form-control">
    <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;
}

赞(0）回复(0）举报 2022-12-05

我来回答

css 水平对齐包含选定内容的窗体

1条答案

相关问题

热门标签

最新问答