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>

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

Answer 3

没有任何包装元素或固定值，很难实现......

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

将您的链接与＆＃39; display：block;对齐;浮动：右＆＃39;在右边。
现在设置＆＃34;行高：40px;＆＃34;标题和链接

应该可以工作，但只有当标题的大小没有改变时......

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;

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

左边是H1，右边是“按钮”，垂直对齐

5 个答案: