Question

如何在输入字段中对齐搜索图标（浮动在右侧中央）？我环顾四周，发现了一些关于将它用作背景图像的东西，不知道如何做到这一点。

＆＃13;

.search {
	border: #cccccc solid;
	border-width:2px;
	padding:9px;
	font-size:24pt;
	border-radius:10px;
	margin:0; 
	padding-left:30px;
	height:54px
}
.search:focus {
	outline:none;
}
#search {
	position:relative; 
	padding:0; 
	margin:0;
}
#srch_icon {
	height:32px;
	width:32px;
}

＆＃13;

<div id="search">
	<input type='text' class='search left'>
	<img src="search.png" id="srch_icon">
</div>

＆＃13;

Answer 1

我肯定会使用背景图片：

#search input {
    background-image: url('search.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: right center;
}

希望这有帮助！

Answer 2

您可以仅使用背景属性使用CSS定位图像。

background: color position/size repeat origin clip attachment image|initial|inherit;

在你的情况下：

background: url(search.png) right center no-repeat;

请参阅： http://jsfiddle.net/arglab/dgy79e8y/1/

顺便说一句，我认为这会更好看：http://jsfiddle.net/arglab/dgy79e8y/

Answer 3

您可以在此处放置背景图片，例如http://jsfiddle.net/29qoevve/ background: white url(...

对齐输入字段内的搜索图标？

3 个答案: