Question

我无法在搜索字段中保留搜索图像。我创建了一个容器区域，我想在屏幕中间居中，我给它的最大宽度为“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像素，事情仍然在包装。如果屏幕区域很小（例如移动浏览器），我很好，但如果有足够的空间，我希望所有内容都显示在一行上。

感谢任何帮助， - 戴夫

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

Answer 2

您的包装物品太宽了。您有多个选项，要么将包含框的宽度增加到650px（例如），要么减小现有输入字段的宽度。

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

之后添加明确的修补程序

无法将搜索元素保留在一条水平线上

2 个答案: