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

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高度对你没有帮助),你将不得不摆弄边距或其他东西来制作它真的很棒.进一步讨论:我如何*真正*证明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/