如何右对齐内联块元素？

正如您在下面的 Fiddle 中看到的：http://jsfiddle.net/EvWc4/3/ http://jsfiddle.net/EvWc4/3/，我目前正在寻找一种方法将第二个链接 (link-alt) 与其父链接 (p) 的右侧对齐。

为什么不使用浮动或位置：绝对你会说，主要原因是我喜欢链接的显示（内联块）属性允许它们以自然的方式垂直对齐。

通过使用 float 或position:absolute;我将被迫计算并放置一些额外的边距顶部或顶部值来垂直对齐链接。

这是代码，但最好看看 Fiddlehttp://jsfiddle.net/EvWc4/3/ http://jsfiddle.net/EvWc4/3/ :

    <p>
        <a href="#" class="link">link</a>
        <a href="#" class="link link-alt">link alt</a>
    </p>

    p {
       padding: 20px;
       background: #eee;
    }
    .link {
       display: inline-block;
       padding: 10px;
       background: #ddd;
    }
    .link-alt { padding: 20px; }

要使用 CSS3 做到这一点，您可以使用弹性盒模型

HTML:

<div class="content">
    <div class="box box1"><a>Link 1</a></div>
    <div class="box box2"></div>
    <div class="box box3"><a>Link 2</a></div>
</div>

CSS:

.content {
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}
.box2 {
    box-flex: 1;
}

（需要供应商前缀）

http://jsfiddle.net/EvWc4/18/ http://jsfiddle.net/EvWc4/18/