我无法将搜索字段与搜索图像保持在一行中。我创建了一个容器区域,我希望它位于屏幕中间,并将其最大宽度设置为“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 像素,内容仍然是环绕的。如果屏幕区域较小(例如移动浏览器)时东西换行我没问题,但如果有足够的空间,我希望所有内容都显示在一行上。
感谢任何帮助,- 戴夫
最佳答案
您需要将所有输入元素设置为“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:
关于html - 无法将搜索元素保持在一条水平线上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39839651/