CSS 左侧 H1，右侧“按钮”，垂直对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12511135/
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
H1 on the left, "buttons" on the right, vertically aligned
提问by Nicolas Le Thierry d'Ennequin
I'm trying to display on one line:
我试图在一行上显示：
- a H1 element aligned to the left of the containing box
- several "buttons" (A elements here) aligned to the right of the containing box
- all being on the same baseline
- 与包含框左侧对齐的 H1 元素
- 几个“按钮”（此处为 A 元素）与包含框的右侧对齐
- 都在同一基线上
Is it possible to do this with minimal markup (i.e. no wrapping elements) and without having to set precise heights, line-heights, margin-tops, etc.
是否可以使用最少的标记（即没有包装元素）并且不必设置精确的高度、行高、边距顶部等来做到这一点。
<div id="block1">
<h1>What a great title</h1>
<a href="javascript:void(0)">This link can kill you</a>
<a href="javascript:void(0)">Click if you dare</a>
</div>
The fiddle here shows what I feel are two incompatible directions (inline-blocks and you can't align to the right vs. float right and you can't align vertically): http://jsfiddle.net/GlauberRocha/bUsvX/
这里的小提琴显示了我觉得是两个不兼容的方向（内联块，你不能向右对齐与向右浮动，你不能垂直对齐）：http: //jsfiddle.net/GlauberRocha/bUsvX/
Any idea?
任何的想法？
采纳答案by amn
You have a potential problem with that layout - what if your H1is too long and so are the buttons? They will run in to each other. Because of this, no simple CSS will do - CSS doesn't do magic like that - it would have to imply some sort of solution to the above problem.
你的布局有一个潜在的问题——如果你的布局H1太长，按钮也太长怎么办？他们会互相冲撞。正因为如此，没有简单的 CSS 会做 - CSS 不会做那样的魔法 - 它必须暗示对上述问题的某种解决方案。
However, what you want can simply be accomplished using absolute positioning:
但是，您可以使用绝对定位简单地完成您想要的操作：
<div style="position: relative;">
<h1 style="position: absolute; left: 0; top: 0">What a great title</h1>
<div style="position: absolute; right: 0; top: 0; text-align: right">
<a href="javascript: void(0)">This link can kill you</a>
<a href="javascript: void(0)">Click if you dare</a>
</div>
</div>
If you are really afraid that the header and the anchor container might run in to each other depending on generated content, you can use CSS max-widthand overflowproperties to restrict their containing boxes to some sensible values. The overflowing content will be hidden but at least the layout will not break visually. I assume the following modification of the above code (pardon the duplicate) would serve the purpose:
如果你真的担心头和锚容器可能会根据生成的内容相互运行，你可以使用 CSSmax-width和overflow属性将它们的包含框限制为一些合理的值。溢出的内容将被隐藏，但至少布局不会在视觉上中断。我假设对上述代码进行以下修改（请原谅重复）将达到目的：
<div style="position: relative;">
<h1 style="position: absolute; left: 0; top: 0; max-width: 50%; overflow: hidden">What a great title</h1>
<div style="position: absolute; right: 0; top: 0; text-align: right; max-width: 50%; overflow: hidden">
<a href="javascript: void(0)">This link can kill you</a>
<a href="javascript: void(0)">Click if you dare</a>
</div>
</div>
To round off, you cannotachieve this using a straightforward CSS property combination, because with CSS (and HTML), content flows from left to right and top to bottom, or it becomes absolutely- or fixed- positioned which interrupts the flow. Anyhow, it does not want to remain on the same line, and you as the layout designer are left with resolving ambiguities such layout would introduce, such as what to do when the two trains running from each direction front-collide with each other :-)
总而言之，您无法使用简单的 CSS 属性组合来实现这一点，因为使用 CSS（和 HTML），内容从左到右、从上到下流动，或者变成绝对定位或固定定位，从而中断流程。无论如何，它不想保持在同一条线上，而您作为布局设计师则需要解决这种布局会引入的歧义，例如当从每个方向行驶的两列火车相互碰撞时该怎么办：- )
回答by Tu H.
I did this to my site a quite ago: a h2 on the left, and a button on the right. Screen shot:
我很久以前在我的网站上做过这个：左边是一个 h2，右边是一个按钮。截屏：
Code:
代码：
<div id="side_bar" class="clearfix">
<h2 style="float: left;">Charity Map</h2>
<button class="btn btn-primary" style="float: right; position: relative; top: 10px; right: 10px;">Submit</button>
</div>
回答by SvenFinke
It's hard to achieve without any wrapping elements or fixed values...
没有任何包装元素或固定值很难实现......
Adding a fixed line-height to both the Heading and the Links would solve your problem rather quick.
向标题和链接添加固定行高将很快解决您的问题。
- Align your Links with 'display:block; float:right' to the right.
- Now Set "line-height: 40px;" to both the heading and the links
- 将您的链接与 'display:block; 对齐 浮动：向右'向右。
- 现在设置“行高：40px；” 到标题和链接
Should work, but only when the size of the heading doesn't change....
应该工作，但只有当标题的大小不改变时......
回答by robd
One potential approach to this, depending on your exact needs, is to use a table layout:
根据您的具体需求，一种可能的方法是使用表格布局：
#block3 {
display: table;
width: 100%;
box-sizing: border-box;
}
#block3 > * {
display: table-cell;
}
#block3 > *:last-child {
text-align: right;
}
JSFiddle: http://jsfiddle.net/bUsvX/39/
JSFiddle：http: //jsfiddle.net/bUsvX/39/
If you want the buttons strictly aligned right, I think this solution requires another element to wrap them:
如果您希望按钮严格对齐，我认为此解决方案需要另一个元素来包装它们：
JSFiddle: http://jsfiddle.net/bUsvX/40/
JSFiddle：http: //jsfiddle.net/bUsvX/40/
回答by Mat
I had the same issue.. Add display:inlineto the h1, then for buttons: float:right; display:inline;
我有同样的问题..添加display:inline到 h1，然后添加按钮：float:right; display:inline;
example (with use of Twitter Bootstrap):
示例（使用Twitter Bootstrap）：
<h2 style="display:inline">Users</h2>
<a href="users.xls"><i class="icon-download-alt"></i>XLS</a>
<form style="display:inline; float:right;">
<input type="text" class="input-medium search-query" name="search">
<button class="btn" type="submit">Search</button>
</form>
