Question

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

为什么不使用float或position：绝对你会说，主要原因是我喜欢链接'display（inline-block）属性允许它们以一种自然的方式进行垂直对齐的事实。

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

以下是代码，但最好看小提琴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和grid项目应该解决这些问题，但截至2013年，标准支持仍然不稳定。

回到现实世界。我不认为可以在没有像素黑客的CSS2.1（IE8 +）中完全做到这一点。问题是，文本对齐由父元素控制，并且由于两个锚点共享它们的父元素，它们要么都左对齐，要么对齐。并且证明在最后一行不起作用。

如果您可以使用一些额外的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高度对你没有帮助），你将不得不摆弄边距或其他东西使它真的有用。进一步讨论：How do I *really* justify a horizontal menu in HTML+CSS?

2）在锚标签顶部添加另一层内联块，并将其大小调整为50％。然后，您可以应用单独的text-align来获取所请求的最终布局。重要的是，在两个大小为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;
}

http://jsfiddle.net/EvWc4/13/

Answer 4

我相信这可以实现您的目标：

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

您可以使用position: absolute和right: 0来获得正确的对齐方式。要保持垂直居中，可以使用top: 0; bottom: 0; margin: auto;。当然，您还需要在元素上设置高度，否则它将延伸到其父级的整个高度。

这是一个小问题：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}

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

Reference article

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

如何在右边对齐一个内联块元素？

7 个答案: