我已经设法将搜索图标在输入字段中获取,并且可以以边距为中心:0自动:该字段并将其保持在页面右侧,因为它已在块上 - 但这是我设法将其居中的唯一方法(。HTML/CSS的新手,那么是否有适当的方法可以做到这一点?想要学习。
当前有此代码:
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
.search {
position: relative;
color: #aaa;
font-size: 16px;
}
.search input {
width: 500px;
height: 32px;
background: #fcfcfc;
border: 0;
border-bottom: 5px solid #000;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0 auto;
}
.search input {
text-indent: 32px;
}
.search .fa-search {
position: absolute;
top: 10px;
left: 10px;
}
<div class="search">
<span class="fa fa-search"></span>
<input placeholder="Search term" id="search" class="keyword">
</div>
输入是一个内联元素,请考虑将包装器(块((块元素(居中在您可以使用margin:auto
的位置上。您也可以使用Max Width在小屏幕上响应:
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
.search {
position: relative;
color: #aaa;
font-size: 16px;
max-width: 500px;
width:100%;
margin:0 auto;
}
.search input {
width:100%;
height: 32px;
background: #fcfcfc;
border: 0;
border-bottom: 5px solid #000;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.search input {
text-indent: 32px;
}
.search .fa-search {
position: absolute;
top: 10px;
left: 10px;
}
<div class="search">
<span class="fa fa-search"></span>
<input placeholder="Search term" id="search" class="keyword">
</div>