图像，然后将文本对齐

Question

此刻，我有：

HTML：

<div class="menu">
    <img src="logo.png" alt="6" />
    <a href="1.html" title="1" id="ton">Hendrerit</a>
    <a href="2.html" title="2" id="ton">Phasellus</a>
</div>

CSS：

.menu img {
    vertical-align: middle;
}
.menu a#ton:link,
.menu a#ton:visited,
.menu a#ton:active {
    display: inline-block;
    padding: 19px;
}

JSFiddle ：http://jsfiddle.net/BT5K9/

将链接对齐到右边的最佳方法是什么？我只想要现代浏览器，所以我想这很简单。我认为text-align因display: inline-block因{{1}}而无效。也许没有漂浮？感谢。

Answer 1

如果您不反对使用span或float， 这是一个解决方案：jsFiddle

Answer 2

如果您不想使用float：

.menu img
{
display: block;
text-align: left;
position: absolute;
}

.menu a
{
text-align: right; 
display:block;  
}

here is jsfidle