这是来自 Treehouse 作者的一些代码,展示了如何在输入框内放置一个图标。
HTML:
<div class="search">
<span class="fa fa-search"></span>
<input placeholder="Search term">
</div>
CSS:
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
body {
margin: 30px;
}
.search {
position: relative;
color: #aaa;
font-size: 16px;
}
.search input {
width: 250px;
height: 32px;
background: #fcfcfc;
border: 1px solid #aaa;
border-radius: 5px;
box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}
.search input {
text-indent: 32px;
}
.search .fa-search {
position: absolute;
top: 10px;
left: 10px;
}
证明这一点的笔: http://codepen.io/jamesbarnett/pen/aBnbL#0
如何将图标放在输入的末尾并让它响应屏幕的变化?
我尝试使用百分比定位图标,但它根本不起作用。 这是我尝试的 fiddle :
http://jsfiddle.net/x7j869g7/2/
最佳答案
您可以将display:inline-block;
和position:relative
赋给.search
然后将图标对齐到右侧(右:10px
).
Jsfiddle
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
body {
margin: 30px;
}
.search {
position: relative;
color: #aaa;
font-size: 16px;
display: inline-block;
}
.search input {
width: 250px;
height: 32px;
background: #fcfcfc;
border: 1px solid #aaa;
border-radius: 5px;
box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}
.search input {
text-indent: 5px;
padding-right: 30px;
box-sizing: border-box;
}
.search .fa-search {
position: absolute;
top: 8px;
right: 10px;
}
<div class="search">
<span class="fa fa-search"></span>
<input type="text">
</div>
https://stackoverflow.com/questions/34081889/