html - 对齐 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

尝试从 ul 中删除固有边距。

#botoes {
    margin: 0;
}

并删除行高：

#botoes li {
    line-height: auto;
} 

小提琴

Answer 2

这是解决方案

//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 3

为 . 添加负边距img。

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

更新了 jsFiddle

编辑：关于负边距的可靠文章以及为什么可以使用它们。

编辑 2：对于反对者，您能发表评论解释原因吗？