Question

我正在尝试对齐并调整水平连接并在一行中的链接中的表单字段。关于我怎么做的任何想法？

Answer 1

在display:flex上使用.idx-omnibar-form form，在其子元素上使用flex:1;，如下所示：

＆＃13;

.idx-omnibar-form{
display:flex;
align-items:flex-end;
}
.idx-omnibar-form *{
flex:1;
margin-right:5px;
}

＆＃13;

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

＆＃13;

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

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

2 个答案: