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

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

Answer 1

对父母inline-block的孩子使用white-space: nowrap。它会阻止儿童进入下一行。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

通过在CSS声明中设置-webkit-和-ms-等前缀，可以改善浏览器上对flexbox的支持。

JSFiddle to play around with

Browser support for flexbox

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

Answer 4

更新＃2：

这就是你想要的吗？

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

我使用#loginArea类似于包装器。垂直对齐它的方式与之前相同。 width: 100%;。我使用transform

text-align: center;

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

一个小小的更新：

我的原始答案是我认为更好的方式（可能需要进行一些小编辑）来设计它。但如果你真的想按照你的方式去做，它已经有效了。只需在你的小提琴中添加80％的宽度（或符合你需要的东西）到#loginArea。

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的事件字段中添加了一个类（Clear float 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相同。
添加了类btcf:after，它是浮动字段的明确浮点数。

字段需要border-box，因为浏览器默认样式会添加边框，填充以及更多内容。

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

Answer 5

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

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

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

Here is the JSfiddle

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

Answer 8

如果要保持一个输入框更大而另外两个具有相同的宽度，则将要添加宽度的输入框的类更改为＆＃34; searchField1＆＃34;。

并添加以下样式

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

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

    display:inline-flex;

确保此样式覆盖新添加的 div标记的默认显示：阻止。您的代码应如下所示：

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

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

10 个答案:

更新＃2：

一个小小的更新：