无法将搜索元素保持在一条水平线上答案

【问题标题】：Having trouble keeping search elements on one horizontal line无法将搜索元素保持在一条水平线上
【发布时间】：2017-02-11 20:57:08
【问题描述】：

我无法将搜索字段与搜索图像保持在一行。我创建了一个我想要在屏幕中间居中的容器区域，我给它的最大宽度为“580px”……

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

然后我用放大镜搜索图标创建了我的三个搜索元素……

    <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField" style="width:25%">
    <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField" style="width:25%">
    <input type="text" name="event" id="event" placeholder="Event" class="searchField">
    <input alt="Search" type="image" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button" height="40" align="middle">

但即使屏幕上有 580 像素可用，我也无法让所有内容都保持在一条线上。在 Mac Chrome 和 Firefox 上，这看起来不正常 - https://jsfiddle.net/4sjxum1k/1/ 。即使您将查看区域扩大到超过 580 像素，事情仍然是环绕的。如果屏幕区域很小（例如移动浏览器），我很好，但如果有足够的空间，我希望所有内容都显示在一行上。

感谢任何帮助，-戴夫

【问题讨论】：

您是否尝试过调整输入字段的宽度以使所有内容都排成一行？更新小提琴：jsfiddle.net/4sjxum1k/7
当我在 Firefox 中查看该小提琴时，放大镜正在环绕到下一行，即使有超过 580 像素的水平屏幕空间可用。
好的。然后当你将最后一个输入字段（事件）调整为 40% 时，会发生什么？
为什么不使用桌子，完全可以接受并且非常简单！ jsfiddle.net/4sjxum1k/14。让它响应，即使用 %'s 作为宽度，它会相应地调整。我的小提琴向您展示了开头，只需根据您的喜好调整列的宽度即可。
一张表格可以在任何屏幕宽度下将所有内容保持在一行中，但在移动设备上（例如 320 像素宽度），这看起来会非常压缩并且难以使用。在如此小的屏幕宽度下，我希望第三个输入和放大镜溢出到另一行以减少拥挤。

标签： html css inline display

【解决方案1】：

您需要将所有输入元素设置为“display:inline-block;”并且还对每个输入元素应用设置的百分比宽度（宽度：25%;）。

.searchField {
    display: inline-block;
    line-height: 40px;
    font-size: 22px;
    margin: 0;
    vertical-align: middle;
    padding: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    -webkit-appearance: textfield;
    background-color: white;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    text-align: start;
    width:25%;
}

在此处查看 JSFiddle：

https://jsfiddle.net/4sjxum1k/5/

【讨论】：

您让所有输入占 25%，但只有三个输入，所以看起来有点局促。我只希望第一个名字和姓氏字段为 25%。
谢谢，但有几件事 - 放大镜周围的空间比图像的宽度大得多（我希望放大镜部分的宽度与它的实际宽度）。此外，如果有 580 像素可用，我希望所有内容都放在一行中，但这里的“事件”和放大镜搜索会转移到第二行。

【解决方案2】：

您的项目对于您的包装 div 来说太宽了。您有多种选择，要么将包含框的宽度增加到 650 像素（例如），要么减少现有输入字段的宽度。

另一个想法是用一点margin-right 值将所有表单输入浮动到左侧，并将提交项浮动到右侧。这将删除元素上的默认浏览器间距。但是仍然需要调整宽度。不要忘记在 <form> 之后添加一个明确的修复程序

【讨论】：

你有一个 Fiddle 来演示这一切吗？