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

【问题标题】：How do I keep my input fields on one line while centering the DIV that contains them?如何在将包含它们的 DIV 居中时将输入字段保持在一行上？
【发布时间】：2017-01-07 05:41:42
【问题描述】：

我将这个 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>

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

编辑：这就是我在小提琴中看到的。这是在火狐上。请注意，文本字段不在一行上。

编辑 2

根据莫妮卡的小提琴，这就是我所看到的。请注意，第一个 naem 和姓氏在一行，但事件文本框在下一行。我希望所有三个都在同一行，即使包含它们的黑匣子必须展开

【问题讨论】：

对我来说很好
你用的是什么浏览器？我在我所看到的问题中添加了一张图片。我在 Mac Firefox 和 Mac Chrome 上试过这个。
查看您的屏幕截图，没有足够的空间容纳第三个输入......它正在做它应该做的事情
使用 display: table for #loginArea 和 display:table-cell for .searchField 看看jsfiddle.net/UserIsMonica/3mwn14fk/1
@aw04，你在说什么？有大量的水平空间。正因为黑色区域没有足够的水平空间，黑色区域应该扩大以容纳它，因为它之外还有水平空间。

标签： html css block inline display

【解决方案1】：

只是给你一个替代方案，你可以使用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

【讨论】：

谢谢，我看到的唯一问题是当我展开窗口（@987654323@）时，包含框在放大镜右侧有所有这些额外的空间。我只希望盒子占用与其中元素一样多的空间，仅此而已。
嗯，这只是元素的边距和最大宽度。我编辑了代码 sn-p 以便搜索输入不再有边距，所有其他字段都将扩大作为容器。这里甚至还有一个新的 JSFiddle：jsfiddle.net/thepio/t8c53ayq
感谢这个更新的小提琴。我注意到当我扩展窗口的宽度时，文本字段的大小发生了变化。理想情况下，我希望它们保持在 "size='x'" 的任何宽度。
在我进行更改之前不就是这样吗？输入可以具有 min 和 max-width 属性，这将使它们保持固定或允许一些宽度变化。
有没有什么办法可以做到这一点，你不为输入指定“宽度”属性，而只是让它们的宽度是浏览器呈现的“size ='x'”是什么？跨度>

【解决方案2】：

将inline-block 用于父级为white-space: nowrap 的子级。它将防止孩子在下一行换行。

注意：请在全页模式下查看sn-p。

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

【讨论】：

谢谢，但是当我压缩屏幕以致没有足够的空间时，元素会消失而不是像他们应该的那样包裹——jsfiddle.net/3mwn14fk/5。
@Mike 您可以使用媒体查询并将white-space: nowrap 从上方移动到您希望输入不换行的位置。
什么是媒体查询？无论如何，当我删除“空白：nowrap;”时指令，即使有 enoguh 屏幕空间来显示它们，事情也会自动结束 -- jsfiddle.net/3mwn14fk/6 ，这让我回到了我试图解决的原始问题。
@Mike 媒体查询根据视口的宽度应用样式。您可以查看我在上面评论中发布的小提琴。我希望它能解决你的问题。
啊，我想念你的小提琴。为什么我们需要“最小宽度”指令？如果在移动设备上观看会中断吗？

【解决方案3】：

有几种方法可以实现这一目标，成功程度不同，具体取决于所使用的方法：

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

然而，这是一个有限的解决方案，因为您的元素将是浏览器指定的任何默认大小，并且因为容器在某些设备/分辨率/窗口大小上会过大并且不在位置等（最终没有解决用户体验问题）

Flex-box CSS 实现也是另一种方式，并且浏览器实现越来越接近它成为未来可靠选择的程度，是的，它可以在许多地方得到相当好的实现具有某些 CSS 后备和/或 Javascript Shims（可能由框架等提供）的浏览器，但假设您想要有效的防弹覆盖，使用一些数学计算一些百分比宽度，使用浮点数，并添加一些媒体查询以实现您的目标：

下面是执行此操作的 CSS 和注释，

这是Fiddle 来尝试一下。（我已将容器颜色设置为随断点而变化，因此请尝试调整窗口大小。）

/* 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%;
   }
}

【讨论】：

另外，还有几点需要注意： 1. 您在 Event 字段 (#my_object) 上使用 size="50" 属性会使其呈现为 50 个字符宽 ，但这是基于浏览器和字体等，这也可能是您的布局发生变化的部分原因。 2. inline-block 将允许在事情变得太大时进行包装（包括空格 between 元素，这确实占用了一些空间）。 3. 如果你没有使用指定的宽度（和box-sizing:border-box 理智），使用浮点数可以给出同样的行为。
另外，如果#LoginArea 容器似乎折叠到错误的大小/消失/其他东西在下面滑得太远等，请使用 clearfix 技术修复浮动more on floats and clearfixes here
我很欣赏这一点，但问题是，当我扩大屏幕的宽度时 -- jsfiddle.net/kwrsmebo/9 ，即使有足够的空间来显示所有三个，它们并没有排在同一行.输入似乎在水平扩展，我真的不想要。我对 size="50" 呈现为 50 个字符宽这一事实感到满意。我想避免这些字段的固定宽度。
您可以随时根据需要添加/删除/调整断点以控制何时元素对齐。
如果您不喜欢缩放字段大小，请切换到固定宽度和间距（像素宽度等）[并为各种断点设置任意登录框宽度] 但是，字符宽度不是固定的，所以 size=50 应该被一个可计算的 css 大小覆盖......正如我上面提到的，我假设你想要一个更大的字段大小，所以我加倍了，但你可以重新分配所有字段大小，但是你想要，只要不超过容器内部宽度的 100%，它就不会包裹。

【解决方案4】：

更新 #2：

这是你想要的吗？

检查这个小提琴：https://jsfiddle.net/3mwn14fk/18/

我使用#loginArea 有点像包装器。垂直对齐它的方式与您之前所做的相同。 width: 100%;。我使用 text-align: center; 而不是水平对齐 transform
要使text-align: center; 工作，#searchForm 需要为inline-block。如果您不希望 div 中的所有内容居中，则可以在 #searchForm 上使用 text-align: left;。
将background: #000; 等样式移至#searchForm。
删除了searchFieldclass，不再需要了。

一个小更新：

我最初的答案是我认为更好的方式（也许应该对其进行一些小的编辑）来设置它的样式。但是，如果您真的想按照自己的方式进行操作，那么它已经奏效了。只需在小提琴中为#loginArea 添加大约 80% 的宽度（或适合您需要的宽度）。

Google CSS 重置并阅读它。

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

使用媒体查询来编辑不同屏幕尺寸/设备的样式。

这就是我将如何使用您的代码来完成它

使用您的 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>

从事件字段中删除了 size 属性。
将事件字段上的类更改为.searchField2。
向名为.btcf 的事件字段添加了一个类（清除浮点类）。

这是 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 除了宽度相同。
添加了 btcf:after 类，这是浮动字段的明确浮动。

字段上需要border-box，因为浏览器的默认样式会添加边框、内边距，可能还有更多内容。

这是一个小提琴：https://jsfiddle.net/3mwn14fk/16/

【讨论】：

您已从输入框中删除了“大小”元素，但我希望它们保留。我不希望输入宽度扩大，只有 DIV taht 包含它们。我很高兴让 size="x" 属性决定输入的宽度。那有意义吗？我似乎很难在这个问题中向人们解释这一点。
它已经按照你想要的方式工作了。 oi68.tinypic.com/euq8nd.jpg 将#loginArea 的宽度设置为 80% 左右，你会发现它起作用了。
感谢您的扩展回答。不过，这也不完全是。在您的屏幕截图中，黑色容器占用的空间远远超过元素所需的空间。至少在我原来的 Fiddle 中，它的宽度仅与其中的元素一样宽，这正是我想要的。我不希望它比它必须的更宽。
再次更新了答案。这是你想要的吗？ jsfiddle.net/3mwn14fk/18
几乎但是您将父容器 (loginArea) 设置为 100% 宽。在它只占用与其子元素一样多的宽度之前，这正是我想要的。现在它占据了整个屏幕——jsfiddle.net/3mwn14fk/19，这是我不想要的。

【解决方案5】：

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

【讨论】：

即使在您的示例中，“搜索”框也会出现在黑色容器框之外。我希望它们都留在黑色容器中。此外，您在#loginArea 元素上指定了“white-space: nowrap”。如果没有足够的水平空间，我仍然希望可以换行，并且当屏幕太小时，该属性会阻止换行。
嗨，我已经编辑了该代码。再检查一遍。这取决于您可以增加或减少大小的输入框的数量。对于小屏幕，我们可以编写响应式 css 代码。
您能否通过删除“.searchField”和“.searchForm”类上的“width”属性并将 size 元素添加到输入中来完成这项工作（名字和姓氏字段为 10， 30 用于事件字段）？如果是这样，那么我们就完成了。
请运行上述代码并检查。这个输入的大小，我们可以直接给里面的html标签属性（如果是你自己自定义的html），也可以通过Jquery。
我确实运行了你上面的代码，在这里查看——jsfiddle.net/3mwn14fk/21。请注意，当水平屏幕空间较小时，事物不会环绕。

【解决方案6】：

您也必须指定宽度。对“searchField”类进行以下更改：

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

Here is the JSfiddle

【讨论】：

我不希望每件商品都是盒子的 1/3。我想在文本字段上指定一个大小属性，然后从那里确定宽度。

【解决方案7】：

使用 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/

【讨论】：

嘿，我刚刚打开了你的 Fiddle，但它在我的屏幕截图中显示 - 第三个输入将转到下一行，即使有足够的空间。
嗨，迈克，我已经在我的谷歌浏览器中尝试过这个，它工作正常。你能试试这个吗jsfiddle.net/3mwn14fk/4
嗨，我已经进行了第二次编辑，包括一张我用你的 Fiddle 看到的照片。请注意，事件文本框位于名字和姓氏行下方的一行中。我希望它们都在同一条线上，即使这意味着扩大包含它们的黑色区域。

【解决方案8】：

如果您想保持一个输入框更大而其他两个具有相同的宽度，则将要为其添加宽度的输入框的类更改为“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;
 }

希望对你有帮助，

【讨论】：

我不知道还能怎么说——我不想指定任何宽度。我希望容器能够自动理解屏幕上有 enoguh 宽度以在一行中显示所有内容，如果没有，则可以换行。但是在我拥有的小提琴中，有足够的宽度，但它仍然没有把东西排成一行。

【解决方案9】：

您必须在表单中插入一个 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;

然后一切都会在同一行对齐。希望这会成功。

【讨论】：

也许我不理解您的解决方案，但是当我应用 CSS 样式时，当没有足够的水平屏幕空间时，元素不会换行。请参阅我更新的 Fiddle 以及您的解决方案 -- jsfiddle.net/3mwn14fk/10 .
在这种情况下，您可以使用@Muhammad 前面提到的响应式设计 (@media Rule) 来根据屏幕尺寸。
那太好了，但那行不通。看看这个与媒体规则有关的小提琴——jsfiddle.net/3mwn14fk/14。注意水平空间的丰富，但元素是环绕的。

【解决方案10】：

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

【讨论】：

您正在硬编码#searchForm 元素的宽度，但正如我在其他 cmets 中所说，这正是我想要避免的。我希望包含元素是其中元素的宽度。如果没有足够的水平空间来容纳这些元素，那么它们可以换行。