CSS 如何在右侧对齐内联块元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9202607/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align on the right an inline-block element?
提问by inwpitrust
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).
正如您在以下小提琴中所见：http: //jsfiddle.net/EvWc4/3/，我目前正在寻找一种方法将第二个链接 (link-alt) 与其父链接 (p) 的右侧对齐。
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 你会说，主要原因是我喜欢这样一个事实，即链接的显示（内联块）属性允许它们以一种自然的方式垂直对齐。
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.
通过使用浮动或位置：绝对；我将被迫计算并放置一些额外的 margin-top 或 top 值来垂直对齐链接。
Here is the code but better see the Fiddle http://jsfiddle.net/EvWc4/3/:
这是代码，但最好查看 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; }
采纳答案by Petah
To do this with CSS3 you can use the flex box model
要使用 CSS3 做到这一点，您可以使用 flex box 模型
HTML:
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:
CSS：
.content {
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
.box2 {
box-flex: 1;
}
(needs vendor prefixes)
（需要供应商前缀）
回答by Daniel S.
CSS3 flex and grid items are supposed to address these issues, but standard support remains spotty as of 2013.
CSS3 flex 和 grid items 应该可以解决这些问题，但截至 2013 年标准支持仍然参差不齐。
Back to the real world. I don't think it is possible to do this purely in CSS2.1 (IE8+) without pixel hacks. The thing is, text alignment is controlled by the parent element, and since the two anchors share their parent, they either both align to the left or to the right. And justify doesn't work on the last line.
回到现实世界。我认为在没有像素黑客的情况下，完全在 CSS2.1 (IE8+) 中是不可能的。问题是，文本对齐由父元素控制，并且由于两个锚点共享其父元素，因此它们要么向左对齐，要么向右对齐。并且 justify 在最后一行不起作用。
If you can suffer a little additional HTML, there are two approaches:
如果您可以忍受一点额外的 HTML，有两种方法：
1) Add another inline that is guaranteed to wrap the line, and then try to hide the empty line. This allows you to use text-align justify on the parent.
1）添加另一个保证换行的内联，然后尝试隐藏空行。这允许您在父级上使用文本对齐对齐。
<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>
Pros: works on any number of inline blocks, not just two. Only a little extra HTML required.
优点：适用于任意数量的内联块，而不仅仅是两个。只需要一点额外的 HTML。
Cons: takes extra effort to hide the last (empty) line of text (setting the inline block inside of it to 0 height won't help you), and you're going to have to fiddle with margins or something else to make it really work. Further discussion: How do I *really* justify a horizontal menu in HTML+CSS?
缺点：需要额外的努力来隐藏最后一行（空）文本（将其中的内联块设置为 0 高度对您没有帮助），并且您将不得不摆弄边距或其他东西来制作它真的有用。进一步讨论：我如何*真正*证明 HTML+CSS 中的水平菜单合理？
2) Add another layer of inline blocks on top of your anchor tags and size them to 50%. Then you can apply separate text-align to get the final layout you requested. It is important that no whitespace is allowed between two inline blocks sized to 50%, or you'll wrap the line.
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>
Pros: produces the exact layout you requested without polluting the outer box model.
优点：在不污染外箱模型的情况下生成您要求的精确布局。
Cons: only works for two inline blocks (you can try to extend it, but it quickly gets really complicated). Relies on having no extra whitespace, which could jeopardize your nicely formatted markup.
缺点：仅适用于两个内联块（您可以尝试扩展它，但它很快变得非常复杂）。依赖于没有多余的空格，这可能会危及您的格式良好的标记。
回答by Petah
You could set the positionto absoluteand use right: 0
你可以设置position为absolute并使用right: 0
.wrapper {
position: relative;
}
.right {
position: absolute;
right: 0;
}
回答by James Duffy
I believe this accomplishes what you're looking for:
我相信这可以完成您正在寻找的内容：
.link-alt {
position: absolute;
right: 0; top: 0; bottom: 0;
margin: auto;
max-height: 1em;
}
You can use position: absoluteand right: 0to obtain the right alignment. To keep the vertical centering, you can use top: 0; bottom: 0; margin: auto;. Of course, you'll also need to set a height on the element, or it will stretch to the full height of its parent.
您可以使用position: absolute和right: 0来获得正确的对齐方式。要保持垂直居中，您可以使用top: 0; bottom: 0; margin: auto;. 当然，您还需要在元素上设置高度，否则它会拉伸到其父元素的整个高度。
Here's a jfiddle: http://jsfiddle.net/pHppA/
这是一个 jfiddle：http: //jsfiddle.net/pHppA/
回答by curly_brackets
I've updated Pethas example, so it can be done in pure CSS2. It doesn't work in IE7, as it doesn't support display: table-cell;which I use.
我已经更新了 Pethas 示例，因此它可以在纯 CSS2 中完成。它在 IE7 中不起作用，因为它不支持display: table-cell;我使用的。
回答by Will P.
The attribute floathas no bearing on the element's vertical positioning.
该属性float与元素的垂直定位无关。
p{padding:20px;background:#eee;overflow:auto;}
.link-alt{padding:20px; float:right}
should accomplish what you're looking for. Setting the overflow of the parent to something besides it's default (visible) will force it to treat floating children like normal elements.
应该完成你正在寻找的东西。将父级的溢出设置为默认值（可见）之外的其他值将强制它将浮动子级视为正常元素。
回答by Erik Jung
I haven't tested this at all outside of Chrome, so it might suck for IE.
我还没有在 Chrome 之外测试过这个，所以它对 IE 来说可能很糟糕。
This simple (and limited) solution leverages text-align: rightand width: 50%on the aligned children, and white-space: nowrapon the parent to achieve the desired result.
这个简单（且有限）的解决方案利用text-align: right和width: 50%对齐的子项以及white-space: nowrap父项来实现所需的结果。
Example: http://jsfiddle.net/erikjung/ejcJZ/
示例：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;
}
