如何右对齐内联块元素？

Question

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

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

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

这是代码，但最好看看小提琴 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; }

Answer 1

要使用 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/

Answer 2

CSS3 flex 和网格项应该可以解决这些问题，但截至 2013 年，标准支持仍然参差不齐。

回到现实世界。我不认为在没有像素黑客的情况下纯粹在 CSS2.1 (IE8+) 中做到这一点是可能的。问题是，文本对齐方式由父元素控制，并且由于两个锚点共享其父元素，因此它们要么向左对齐，要么向右对齐。并且 justify 在最后一行不起作用。

如果您可以忍受一点额外的 HTML，有两种方法：

1) 添加另一个保证换行的内联，然后尝试隐藏空行。这允许您在父级上使用 text-align justify。

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

<style type="text/css">
    p {
        padding: 20px;
        background: #eee;
        text-align: justify
    }

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

    .link-alt {
        padding: 20px;
    }

    span {
        display: inline-block;
        height: 0;
        width: 100%
    }
</style>

优点：适用于任意数量的内联块，而不仅仅是两个。只需要一点额外的 HTML。

缺点：需要额外的努力来隐藏最后一行（空）文本（将其内部的内联块设置为 0 高度不会有帮助），并且您将不得不摆弄边距或其他东西来实现它真的有效。进一步讨论：我如何*真正*证明水平对齐HTML+CSS 中的菜单？

2) 在锚标记顶部添加另一层内联块，并将其大小设置为 50%。然后您可以应用单独的文本对齐来获得您请求的最终布局。重要的是，两个大小为 50% 的内联块之间不允许有空格，否则您将换行。

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

<style type="text/css">
    p {
        padding: 20px;
        background: #eee;
    }

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

    .link-alt {
        padding: 20px;
    }

    span {
        display: inline-block;
        width: 50%
    }

    .left {
        text-align: left
    }

    .right {
        text-align: right
    }
</style>

优点：产生您所要求的精确布局，而不会污染外盒模型。

缺点：仅适用于两个内联块（您可以尝试扩展它，但它很快就会变得非常复杂）。依赖于没有额外的空格，这可能会危及您格式良好的标记。

Answer 3

您可以将 position 设置为 absolute 并使用 right: 0

.wrapper {
    position: relative;
}
.right {
    position: absolute;
    right: 0;
}

Answer 4

我相信这可以满足您的需求：

.link-alt {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    margin: auto;
    max-height: 1em;
}

您可以使用 position:absolute 和 right: 0 来获得正确的对齐方式。要保持垂直居中，可以使用 top: 0;底部：0；边距：自动；。当然，您还需要设置元素的高度，否则它将拉伸到其父元素的完整高度。

这是一个jfiddle： http://jsfiddle.net/pHppA/

Answer 5

我已经更新了 Pethas 示例，因此可以在纯 CSS2 中完成。它在 IE7 中不起作用，因为它不支持我使用的 display: table-cell; 。

http://jsfiddle.net/EvWc4/133/

Answer 6

属性 float 与元素的垂直定位无关。

p{padding:20px;background:#eee;overflow:auto;}
.link-alt{padding:20px; float:right}

应该完成你正在寻找的东西。将父级的溢出设置为默认值（可见）之外的其他值将强制它将浮动子级视为普通元素。

参考文章

Answer 7

我还没有在 Chrome 之外测试过这个，所以它对于 IE 来说可能很糟糕。

这个简单（且有限）的解决方案在对齐的子项上利用了 text-align: right 和 width: 50% 以及 white-space: nowrap家长才能达到想要的结果。

示例： http://jsfiddle.net/erikjung/ejcJZ/

.vertically-centered-module {
    white-space: nowrap;
}

.vertically-centered-module > * {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
}

.vertically-centered-module > :last-child {
    text-align: right;
}