CSS将图标移动到输入字段的右侧

Question

如何将放大镜移动到输入字段的右侧？

这是我的Fiddle。

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; 
} 

Answer 1

您设置left: 10px的图标了。从左侧设置更多像素，或从右侧设置直接像素。

.search .fa-search {left: 230px;} 

http://jsfiddle.net/xhjLyf1k/1/

设置正确的位置，而不是左侧一个（以防止输入字段的大小调整）：

.search {display: inline-block} /* prevent 100% width */ 
.search .fa-search {left: auto; right: 10px;} 

http://jsfiddle.net/xhjLyf1k/2/