如何在右侧对齐一个inline-block元素？

问题描述

正如你可以在下面的小提琴中看到的：， m当前正在搜索将第二个链接（link-alt）对齐到其父（p）的右侧的方式。

As you can see in the following Fiddle: http://jsfiddle.net/EvWc4/3/, I'm currently searching a way to align the second link (link-alt) to the right side of its parent (p).

为什么不使用float或position：absolute好的主要原因是我喜欢链接的显示（inline-block）属性允许他们以自然的方式垂直对齐。

Why not using float or position:absolute you'll say, well the main reason is that I like the fact that the links' display (inline-block) property allow them to be verticaly aligned in a naturally kind of way.

使用float或position：absolute;我将被迫计算并在垂直对齐的链接上加上一些额外的margin-top或top值。

By using float or position:absolute; I'll be forced to calculate and put some extra margin-top or top value to vertically aligned the links.

这里是代码，但更好地看到小提琴：

Here is the code but better see the Fiddle 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，您可以使用弹出框模型

To do this with CSS3 you can use the flex box model

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;
}

（需要供应商前缀）

这篇关于如何在右侧对齐一个inline-block元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！