html - 如何通过CSS在右侧显示搜索图标？

Question

我想通过css在右侧显示搜索图标图像，但无法这样做。这是代码:

CSS:

.search {
    background: url(../images/icons/search.png) no-repeat;
    display:inline;
    vertical-align:-0px;
}

HTML:

<ul class="sidebar-nav" id="MainMenu">
    <li style="border-bottom:none">
        <a href="#">
            <img src="images/logo.png">
        </a>
    </li>
    <li class="left">
        <a href="#">
            <input type="text" class="search" style="border: 0">
        </a>
    </li>
</ul>

Answer 1

Demo

CSS

.search {
    position:relative;
    top:2px;
    /* readujst in jsfiddle */
    padding:8px 5px 8px 30px;
    background:white url(http://i.imgur.com/lFkqn.png) right center no-repeat;
}

和您更正后的 html

<ul class="sidebar-nav" id="MainMenu">
    <li style="border-bottom:none">
        <a href="#">
            <img src="images/logo.png"/>
        </a>
    </li>
    <li class="left">
        <a href="#">
            <input type="text" class="search" style="border: 0" />
        </a>
    </li>
</ul>