H1在左边，“按钮”在右边，垂直对齐 [英] H1 on the left, "buttons" on the right, vertically aligned

问题描述

我试图在一行上显示：

• 在包含框左侧对齐的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>

这里的小提琴显示了我觉得两个不兼容的方向（内联块和你不能对齐向右与浮动右，您不能垂直对齐）：
http://jsfiddle.net/GlauberRocha/bUsvX /

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/

任何想法？

推荐答案

这个布局的潜在问题 - 如果你的 H1 太长，按钮是什么？他们会互相跑。因为这样，没有简单的CSS会做 - CSS不像魔术那样 - 它将暗示对上述问题的一些解决方案。

You have a potential problem with that layout - what if your H1 is 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.

然而，

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

如果你真的害怕头部和锚点容器可能会相互运行，内容，可以使用CSS max-width 和 overflow 属性将其包含的框限制为一些合理的值。溢出的内容将被隐藏，但至少布局不会视觉上破坏。我假设对上面的代码进行以下修改（宽恕重复）将用于目的：

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-width and overflow properties 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:

<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），内容从左到右和从上到下流动，或者它变成绝对或固定位置，其中断流。无论如何，它不想保持在同一条线，你作为布局设计师留下解决模糊，这种布局将介绍，如当两个火车从每个方向前方碰撞时做什么 - - - ）

To round off, you cannot achieve 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 :-)

这篇关于H1在左边，“按钮”在右边，垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！