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

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

​