css-float – 左边的H1,右边的“按钮”,垂直对齐

我试图在一行显示：

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

任何的想法？

解决方法

你有这个布局的潜在问题 – 如果你的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>

如果您真的担心标头和锚容器可能会根据生成的内容相互运行,则可以使用CSS max-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),内容从左到右,从上到下流动,或者变为绝对或固定位置,从而中断流程.无论如何,它不希望保持在同一条线上,并且你作为布局设计师留下了解决这种布局会引入的歧义,例如当从每个方向前面运行的两列火车相互碰撞时该怎么办： – )

原文地址：https://www.jb51.cc/css/215972.html