对齐ul中的水平图像和文本链接

Question

如何将图像与以下列表中的其余链接对齐？

<div id="barra">
    <ul id="botoes">
        <li><a href="/o-meu-perfil"><img src="image.png" width="25" height="25"></a>
        </li>
        <li><a href="#">Perguntas</a>
        </li>
        <li><a href="/o-meu-perfil">Pesquisa</a>
        </li>
    </ul>
</div>

这是CSS：

#barra {

    position:fixed;
    height:35px;
    border-bottom: solid 1px;
    top:50px;
    background: rgba(250, 0, 250, 0.75);
    border-radius: 2px;
}

#botoes li {
    display: inline-block;
    list-style-type: none;
    padding-right: 5px;
    vertical-align: top;
    line-height: 10px;

}

图片：

如何将整个事物对齐到酒吧的左边？ 您可以在以下位置查看代码：http://jsfiddle.net/pFBT9/1/

Answer 1

这是解决方案

// HTML

<div id="barra">
    <ul id="botoes">
    <li><a href="#" > <img src="image.png" width="25" height="25">Perguntas</a>
    </li>
    <li><a href="/o-meu-perfil"><img src="image.png" width="25" height="25">Pesquisa</a>
    </li>
</ul>
</div>

// CSS

#barra {

position:fixed;
height:35px;
border-bottom: solid 1px;
top:50px;
background: rgba(250, 0, 250, 0.75);
border-radius: 2px;
}

#botoes li {
display: inline-block;
list-style-type: none;
padding-right: 20px;
vertical-align: top;
line-height:5px;
}

#botoes img {
margin-top:-10px;
}

Answer 2

为img添加负边距。

#botoes img {
    margin-top:-10px;
}

Updated jsFiddle

编辑：Solid article on negative margins and why it's ok to use them.

编辑2：对于downvoter，您能否发表评论解释原因？

Answer 3

尝试从ul。

中删除固有的边距

#botoes {
    margin: 0;
}

并删除行高：

#botoes li {
    line-height: auto;
} 

Fiddle