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

Question

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

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

然而，尽管有足够的水平屏幕空间，但其中一个会一直换行到下一行，如 Fiddle 所示 -- https://jsfiddle.net/3mwn14fk/ 。如何将这些项目放在一行中（假设有足够的浏览器宽度）？注意我还想保持 DIV 它们在垂直和水平居中。

编辑：这是我在Fiddle看到的。这是在 Firefox 上。请注意，文本字段不在一行上。

编辑 2

根据 Monica 的 Fiddle，这就是我所看到的。请注意，名字和姓氏在一行，但事件文本框在下一行。我希望所有三个都在同一条线上，即使包含它们的黑框必须展开

Answer 1

您必须指定宽度。对 "searchField" class 进行以下更改：

.searchField {
    display: inline-block;
    width:33%;
    box-sizing:border-box;
    float:left;
}

Here is the JSfiddle

Answer 2

使用 table 和 table -cell 代替 inline-block

  #loginArea {
    border-radius: 25px;
    font-family: 'russo_oneregular';
    font-size: 20px;
    padding: 20px;
    background-color: #000000;
    color: #ffffff;
    display: table;
    position: absolute;
    top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
  }
 .searchField {
     display: table-cell;
     float:left;
     margin :0px 2px 0px; 
 }

有效果看看http://jsfiddle.net/3mwn14fk/4/

Answer 3

如果你想保持一个输入框更大而其他两个输入框的宽度相同，那么将你想要为其添加宽度的输入框的 class 更改为 "searchField1".

并添加以下样式

#loginArea {
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%);
text-align: center;
}

.searchField {
display: inline-block;
width: calc(50% - 100px);
box-sizing:border-box;
float:left;
}

.searchField1 {
display: inline-block;
width: 200px;
box-sizing:border-box;
float:left;
}

如果您想为所有输入框指定宽度，这仍然有效，但不要忘记在图像输入之前添加一个
标签，以便将其放置在下一行中

 .searchField {
 display: inline-block;
 width: 100px; // add your width here
 box-sizing:border-box;
 float:left;
 }

 .search_button{
 clear:both;
 }

希望对您有所帮助，

Answer 4

您必须在表单中插入一个 div，这样所有 三个文本字段都应该包含在 中div 标签。现在将 div 的样式设置为：

    display:inline-flex;

确保此样式覆盖您新添加的 div 标签 的默认 display:block。您的代码应如下所示：

    <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="✓">
                <div style="display:inline-flex">
                    <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">
                </div>
                <input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
            </form>
        </div>
    </div>

如果您还想将搜索图标放在同一行，那么您不必插入新的 div标签。相反，将表单的样式设置为：

     display:inline-flex;

然后所有内容都将对齐在同一行中。希望这会成功。

Answer 5

对 children 使用 inline-block，对 parent 使用 white-space: nowrap。它将防止 children 在下一行换行。

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

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

只是为了给你一个替代方案，你可以使用 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; 会在更大的屏幕上将它们向左对齐。

还可以通过为 CSS 声明设置 -webkit- 和 -ms- 等前缀来改进浏览器对 flexbox 的支持。

JSFiddle to play around with

Browser support for flexbox

Answer 7

有多种方法可以实现这一点，成功程度各不相同，具体取决于所使用的方法：

@Muhammad 选择在输入上使用 display: inline-block; 并强制容器忽略使用 white-space: no-wrap; 的文本换行确实可以实现您的目标强制所有内容在一条线上；

但是，这是一个有限的解决方案，因为您的元素将是浏览器指定的任何默认大小，并且因为容器会过大并且在某些 devices/resolutions/window 尺寸等（最终，用户体验没有得到解决）

Flex-box CSS 实现也是另一种方式，浏览器实现越来越接近于成为未来的可靠选择，是的，它可以在许多具有某些 CSS 回退 and/or Javascript 垫片（可能由框架等提供）的浏览器中实现得相当好，但是假设您想要有效的防弹覆盖，请使用计算一些百分比宽度的小数学，使用浮点数，并添加一些媒体查询来实现你的 objective:

下面是 CSS 和注意事项，

这里是 Fiddle 试试看。（我已将容器颜色设置为随断点而变化，因此请尝试调整 window 的大小。）

/* Control the box-model: (makes assigned widths predictable) */
* { box-sizing: border-box; }

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

/* Default Styles (at full width)
   Assign calculable sizes to the form fields:
   We have 3 fields (1 double-sized) and a button:
   So, 1+1+2+1 = 5; Dividing 100% container-width by 5 = 100/5 = 20%;
   we need spacing between (think margin-right),
   so, shave each element down 1% and set the margin-right to 1%;
   then specifically set the double-width entry separately (40% = 39% + 1%)
*/ 
#searchForm input {
   float: left;
   width: 19%;
   margin: .25em 1% .25em 0;
}
#searchForm input#my_object {
   width: 39%;
}

/* Applying Media Queries to give friendlier form layouts
   by using alternative field sizes for better user experience
   at different break-point sizes (indicated by varying background color */

/* Mobile Styles */
@media only screen and (max-width : 480px) {
   #loginArea {background-color:red;}

   /*Full-width, no margin, stacked; */
   #searchForm input {
     width: 100%;
     margin-right: 0;
   }
   #searchForm input#my_object {
     width: 100%;
   }

}

/* Phablet (In-between-sized mobile styles)
   -- in this case, same as mobile for consistency)
*/
@media only screen and (min-width : 481px) and (max-width : 767px) {
   #loginArea {background-color:yellow;}

   /*Full-width, no margin, stacked; */
   #searchForm input {
     width: 100%;
     margin-right: 0;
   }
   #searchForm input#my_object {
      width: 100%;
   }
}

/* Tablet Styles */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
   #loginArea {background-color:green;}

   /* Name side-by-side, Event stacked full-width below;
      (Using 1% padding on both left and right, to keep things balanced)
   */
   #searchForm input {
      width: 48%;
      margin: .25em 1%;
   }
   #searchForm input#my_object {
      width: 98%;
   }
}

Answer 8

<div class="main-container">
<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>

现在，您可以将 Css 写成，

.main-container {display:block; text-align:center; }
#searchForm { display:inline-block; }
#searchForm form input { float:left; margin-right:5px; width:100px;}

Answer 9

更新#2：

这是你想要的吗？

检查此 fiddle：https://jsfiddle.net/3mwn14fk/18/

我使用 #loginArea 有点像包装纸。像之前一样垂直对齐它。 width: 100%;。我使用 text-align: center;

transform

要使 text-align: center; 工作，#searchForm 需要 inline-block。在 #searchForm 上，如果您不想 div 中的所有内容都居中，则可以使用 text-align: left;。
将 background: #000; 和其他一些样式移动到 #searchForm。
删除了 searchFieldclass，不再需要了。

一个小更新：

我最初的回答是我认为更好的样式设置方式（也许应该对其进行一些小的修改）。但如果你真的想按照你的方式去做，它已经在起作用了。只需在 fiddle.

中向 #loginArea 添加 80% 的宽度（或适合您需要的宽度）

Google CSS 重置并阅读它。

您应该阅读媒体查询：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

使用媒体查询编辑不同屏幕的样式sizes/devices。

这是我用你的代码完成的方法

使用您的 HTML 代码进行一些小的修改：

<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" class="searchField2 btcf">
            <input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
        </form>
    </div>
</div>

从事件字段中删除了大小属性。
将事件字段上的 class 更改为 .searchField2。
在名为 .btcf 的事件字段中又添加了一个 class（清除浮动 class）。

这里是 CSS:

#loginArea {
    border-radius: 25px;
    font-family: 'russo_oneregular';
    font-size: 20px;
    padding: 20px;
    background-color: #000000;
    box-sizing: border-box;
    color: #ffffff;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.btcf:after {
    content: "";
    display: table;
    clear: both;
}
.searchField, .searchField2 {
    display: block;
    float: left;
    box-sizing: border-box;
    width: 25%;
}
.searchField2 {
    width: 50%;
}

#loginArea 的代码相同。
.searchField 和 .searchField2 除宽度外完全相同。
添加了 class btcf:after，这是浮动字段的明确浮动。

字段中需要 border-box，因为浏览器的默认样式添加了边框、填充和可能更多的东西。

这里是 fiddle：https://jsfiddle.net/3mwn14fk/16/

Answer 10

#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%);
}
#search-form {
    margin: 0px;
    padding: 0px;
}
.search_button,
.searchField {
    display: inline;
}

<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" size="10">
  <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField" size="10">
  <input type="text" name="my_object" id="my_object" placeholder="Event" size="30" class="searchField">
  <input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
</form> </div>

</div>

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

How do I keep my input fields on one line while centering the DIV that contains them?

html

css

inline

block

display

更新#2：

一个小更新：