左侧H1，右侧的“按钮”，垂直对齐(H1 on the left, “buttons” on the

我想在一行上显示：

对准以容纳箱左侧的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:

你必须与布局的潜在的问题-如果你有什么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）没有实现这一点，内容从左至右和顶部流至底部，或者它变得absolutely-或定点位于哪个中断流动。总之，它并不想留在同一行，而你作为布局设计师留下了解决歧义这样的布局会引入，例如当两列火车从各个方向前互相碰撞运行做什么： - ）

Answer 2:

我这样做是为了我的网站相当前：左边一个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 3:

这是很难实现没有任何包裹件或固定值...

添加一个固定的line-height的标题和链接都将解决你的问题相当快。

以“显示对齐您的链接：块; 浮动：权利”的权利。
现在设置“行高度：40像素;” 在标题和链接都

应该工作，但只有当标题的大小不会改变....

Answer 4:

这一个潜在的方法，根据您的实际需要，是使用表格布局：

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

Answer 5:

我有同样的问题..添加display:inline到H1，则按钮： float:right; display:inline; float:right; display:inline;

例如（使用的Twitter的引导）：

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

文章来源: H1 on the left, “buttons” on the right, vertically aligned