如何在包含它们的DIV居中的同时将输入字段保留在一行上？

Question

我把这个CSS类给了一些输入字段

.searchField {
    display: inline-block;
}

这是他们的基础HTML ...

<div id="searchForm">
Search For Results<br> 
<form id="search-form" action="/races/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="?">
    <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
    <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
    <input type="text" name="my_object" id="my_object" placeholder="Event" size="50" class="searchField">
    <input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
</form> </div>

然而,尽管有足够的水平屏幕空间,其中一个仍然包装到下一行,正如这个小提琴所示 - https://jsfiddle.net/3mwn14fk/.如何将这些项目保留在一行(假设浏览器宽度足够)？注意我还想保持它们在垂直和水平居中的DIV.

编辑:这就是我在小提琴中看到的.这是在Firefox上.请注意,文本字段不在一行上.

编辑2

每个莫妮卡的小提琴,这就是我所看到的.请注意,第一个naem和姓氏在一行上,但事件文本框在下一行.我希望所有三个都在同一条线上,即使包含它们的黑盒必须扩展

Answer 1

使用inline-block有子女white-space: nowrap的父母。它将防止孩子在下一行换行。

注意：请在整页模式下查看代码段。

#loginArea {
  white-space: nowrap;
  border-radius: 25px;
  font-family: 'russo_oneregular';
  font-size: 20px;
  padding: 20px;
  background-color: #000000;
  color: #ffffff;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.searchField {
  display: inline-block;
  vertical-align: top;
}

<div id="loginArea">
  <div id="searchForm">
    Search For Results<br> 
    <form id="search-form" action="/races/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="?">
      <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
      <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
      <input type="text" name="my_object" id="my_object" placeholder="Event" size="50" class="searchField">
      <input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
    </form>
  </div>
</div>

Answer 2

只是为了给你一个替代方案，你可以flexbox用来实现你想要的。这是一个快速演示：

/* Just some basic CSS declarations to start with */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 100%;
  min-height: 100%;
}

h4 {
  margin: 5px 0; /* Just to make the demo look nicer */
}

#loginArea {
  border-radius: 25px;
  font-family: 'russo_oneregular';
  font-size: 20px;
  padding: 20px;
  background-color: #CCCCCC;
  color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80%; /* You could use anything here, depending if you have a wrapping parent etc */
}

#search-form {
  position: relative;
  display: flex;
  align-items: center; /* Not necessary but will center the items */
  flex-direction: row; /* Not necessary but tells that they should be in a row */
  justify-content: flex-start; /* Will align items to left on larger screens */
  flex-wrap: wrap; /* Will allow the flex inputs to wrap on smaller screens */
}

#search-form > * { /* You could give a class or element instead of asterix */
  margin: 0 10px 5px 0; /* Just to make it look nices */
  width: 25%; /* Width of text inputs, you could set them different from each other */
  min-width: 100px; /* Min width to wrap elements when small screen */
  flex: 1;
}

#search-form .search_button {
  max-height: 20px;
  flex: 0 0 20px; /* Keep the magnifying class proportioned/20px wide */
  min-width: 0px; /* Do not use the min-width declared above */
  margin: 0 0 5px 0;
}

<div id="loginArea">
  <div id="searchForm">
    <h4>
      Search For Results
    </h4>
    <form id="search-form" action="/races/search" accept-charset="UTF-8" method="get">
      <input name="utf8" type="hidden" value="?">
      <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
      <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
      <input type="text" name="my_object" id="my_object" placeholder="Event" size="50" class="searchField">
      <input alt="Search" type="image" src="http://image.flaticon.com/icons/png/128/49/49116.png" class="search_button">
    </form>
  </div>
</div>

我将登录区域设置为 80% 的宽度，但您当然可以以任何您想要的方式更改它。我还将min-width输入的 设置为 100 像素 - 除了最后一个 - 以便它可以很好地包裹在较小的屏幕上。我还max-width为输入设置了，因此它们不会无限增长，并且搜索表单justify-content: flex-start;会将它们与更大屏幕上的左侧对齐。

同样在浏览器的Flexbox的支持可以设定前缀等来改善-webkit-和-ms-等的CSS声明。

可以玩的 JSFiddle

浏览器对 flexbox 的支持