左边是H1,右边是"按钮",垂直对齐

Question

我试图在一行显示:

• H1元素与包含框的左侧对齐
• 几个"按钮"(此处为A元素)与包含框的右侧对齐
• 所有人都在同一基线上

是否可以使用最少的标记(即没有包装元素)并且无需设置精确的高度,线高,边距顶部等.

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

这里的小提示显示我觉得两个不兼容的方向(内联块,你不能正确对齐右浮动,你不能垂直对齐):http: //jsfiddle.net/GlauberRocha/bUsvX/

任何的想法？

Answer 1

我很久以前就在我的网站上做了这个:左边是h2,右边是按钮.截屏:

码:

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

Answer 2

你的布局有一个潜在的问题——如果你的布局H1太长，按钮也太长怎么办？他们会互相冲撞。正因为如此，没有简单的 CSS 会做 - CSS 不会做那样的魔法 - 它必须暗示对上述问题的某种解决方案。

但是，您可以使用绝对定位简单地完成您想要的：

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

如果你真的担心头和锚容器可能会根据生成的内容相互运行，你可以使用 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>

总而言之，您无法使用简单的 CSS 属性组合来实现这一点，因为使用 CSS（和 HTML），内容从左到右、从上到下流动，或者变成绝对定位或固定定位，从而中断流程。无论如何，它不想保持在同一条线上，而您作为布局设计师则需要解决这种布局会引入的歧义，例如当从每个方向行驶的两列火车相互碰撞时该怎么办：- )