如何将两个项目向右对齐，而不进行手动高度/边距计算？

Question

这个小提琴演示了这个问题。

我正在尝试将图像和按钮在两条单独的行上向右对齐，作为联合单位。我创建了一个带有position:relative的包装div（“right-stuff”），所以我可以在它的子按钮上使用position:absolute。

问题是我不知道有什么好方法可以将按钮向右对齐而不影响高度计算。

我所做的是给它 position:absolute 和 right:0，但这会将其从流程中删除，并导致容器（“right-stuff”）不包含它 - 看看红色背景如何没有到达它，尽管它“应该”。

另一个问题是，“right-stuff”之后的流中的下一个项目将需要一个 margin-top 才能处于正确的位置，否则我必须给“right-stuff”一个我自己计算的宽度，或者一个人工的宽度边距（考虑按钮高度）。这里的知识太多了。

有没有更好的方法让这两个项目充当一个连贯的单元，即“右对齐”，但又不脱离流程？

显然，这不是第一次有人问这个问题，但我在这里还没有找到解决这些特定问题的答案，而无需丑陋的黑客（例如手动添加等于按钮高度的 margin-bottom）。

编辑：文本对齐是一个不错的解决方案（无论如何比我想象的要好）。需要注意的是：它假设按钮确实是文本的，并且不适用于图像本身。在我的示例中这是可以的，因为图像是容器中最宽的东西 - 但是如果容器中有另一个比图像宽的元素怎么办？如何使图像保持右侧对齐？

Answer 1

是的，由于这两个元素（img 和 button）都是 inline-block，因此您可以简单地使用 text-align: right< /代码>。

Answer 2

文本右对齐有什么问题？

<div id="nContainer">
    <div id="nRight-stuff">
        <div id="nRight-img">
            <img src="http://sharecare.files.wordpress.com/2008/04/cute-animals-1.jpg?w=490" />
        </div>
        <button id="nRight-btn">A right aligned button</button>
    </div>
    <br style="clear: both" />
</div>

#nRight-stuff {
    float: right;
    text-align: right;
}

小提琴

Answer 3

查看编辑后的小提琴 http://jsfiddle.net/HXH5Z/4/

基本上我已经只是将按钮带回流程中，但将其包含在 div 中，将内容（文本对齐）向右对齐。只需将 text-align: right 规则添加到 #right-stuff div 即可实现相同的效果，但我不知道您是否也希望图像与该 div 内的右侧对齐...