现在它在桌面上看起来很棒,但在移动设备上它只是漂浮在页面中间,当您尝试输入时,您看不到您输入的内容。
The image you see here is for desktop
On mobile it's just a little blob in the center
桌面位于右上角以供引用。为什么它会在手机上移动到中间?
// Search
.block-search {
display: inline-block;
.label {
display: inline-block;
float: none;
}
input {
border-radius: 50px;
height: 40px;
padding-left: 20px;
padding-right: 44px;
}
.control {
border-top: 0;
clear:none;
margin: 0;
padding: 0;
}
.action.search {
background: #5a5a5a;
border-radius: 50px;
height: 34px;
right: 4px;
top: 3px;
width: 34px;
}
.search-autocomplete ul:not(:empty) {
border-color: #c2c2c2;
border-top: 1px solid #c2c2c2;
}
.search-autocomplete ul {
li {
border-color: #c2c2c2;
&:hover {
background-color: #e5e5e5;
}
.amount {
color: #444;
}
}
.selected {
background-color: #e5e5e5;
}
}
}
最佳答案
在 2019 年,使用 float
进行布局既不时尚也不实用。相反,您应该使用 flexbox
或(如果您的设计需要更复杂的布局)CSS Grid
。你希望你的布局尽可能“高”。在父容器中设置规则,让子容器按照您的决定流动。
这是一个简单的例子。
- 设置父容器的宽度不能大于视口(viewport)的宽度
- 将所有
header
内容居中 - 尽量不要在元素上设置明确的
高度
。相反,使用填充。这将在不同的用户调整字体大小下很好地缩放。
html, body { margin: 0; }
.container {
width: 960px;
max-width: 100vw;
}
header {
padding: 0.5em 0;
display: flex;
justify-content: center;
}
.searchBox {
border: 1px solid gray;
border-radius: 20px;
padding: .5em 1em;
}
<div class="container">
<header>
<input type="search" class="searchBox" placeholder="Search…">
</header>
</div>
关于css - 让我的搜索框更适合移动设备,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54916139/