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

这里的小提琴展示了我认为两个不兼容的方向（inline-blocks和你无法对齐到右边 vs. float right和你无法垂直对齐）：http://jsfiddle.net/GlauberRocha/bUsvX/ 有什么想法吗？

- Nicolas Le Thierry d'Ennequin

---

这个链接可能会帮助你。https://dev59.com/xnI-5IYBdhLWcg3wu7FU - Mr_Green

@venkateshwar：谢谢，但我理解display:block和display:inline之间的区别以及它所意味着的。你的链接很有趣，可以帮助我更深入地了解，但在这里，我正在尝试找到解决这个特定问题的最佳方法。 - Nicolas Le Thierry d'Ennequin

你的 JS Fiddle 链接已经损坏。 - Michael Giovanni Pumo

我知道，我不小心删掉了它... - Nicolas Le Thierry d'Ennequin

这是一个新的JS Fiddle：http://jsfiddle.net/GlauberRocha/bUsvX/ - Nicolas Le Thierry d'Ennequin

类似问题：https://dev59.com/umkv5IYBdhLWcg3w6k1Q - robd

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>

- Tu H.

Answer 2

你的布局可能存在潜在问题 - 如果你的

太长或者按钮也是，它们就会相互碰撞。因此，简单的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），内容从左到右、从上到下流动，或者变成绝对或固定位置，这会打断内容的流动。无论如何，它不想留在同一行，作为布局设计师，您必须解决这种布局可能引入的歧义，例如当两列火车相向而行时前面碰撞时应该怎么办:-)。

- Armen Michaeli

---

你指出标题或按钮过长可能存在的问题是正确的（尽管我在这里并不介意）。你的解决方案看起来非常正确 - 尽管有额外的标记！ - Nicolas Le Thierry d'Ennequin

Answer 3

根据您的具体需求，可能有一种潜在的方法是使用表格布局：

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

- robd

Answer 4

如果没有任何包装元素或固定值，这是很难实现的...

为标题和链接添加一个固定行高，可以很快解决您的问题。

• 用"display:block; float:right"将您的链接与右侧对齐。
• 现在将"line-height: 40px;"设置到标题和链接中

应该会起作用，但仅当标题大小不变时...

- SvenFinke

---

好的，我不想为链接设置line-height，因为背景颜色的原因。那会让它们看起来比我想要的高。 - Nicolas Le Thierry d'Ennequin

Answer 5

我遇到了同样的问题... 在h1中添加display:inline，然后对于按钮使用：float:right; display:inline;

示例（使用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>

- Mat

---

是的，我考虑过那个解决方案，但如果你添加 float:right，显示属性实际上会变成 block（Firebug说）。 - Nicolas Le Thierry d'Ennequin

没错。浮动通常不适用于内联元素。也许某些浏览器的行为很奇怪，结果可能正是您想要实现的...但这是错误的... - SvenFinke

我添加了刚从工作网页复制的示例。希望它有所帮助。如果你明确地添加样式显示，它应该能够工作，我猜.. - Mat

不，你的例子是不行的。如果你把 H2 变得更大，你自己就会看到。@Gushiken 是正确的。 - Nicolas Le Thierry d'Ennequin

好的，如果你想保持基线，这种方式是不可能的。我并不太担心基线的问题。但是，如果你有固定的h1大小，你可以编辑链接中的“line-height”，并调整它使其看起来更好。 - Mat