12

我试图在一行上显示：

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

任何的想法？

4

5 回答 5

11

我很久以前对我的网站做了这个：左边是一个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>
于 2012-11-01T15:15:15.900 回答
6

您的布局可能存在问题 - 如果您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>

如果您真的担心标题和锚容器可能会根据生成的内容相互碰撞，您可以使用 CSSmax-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），内容从左到右、从上到下流动，或者它变成绝对定位或固定定位，这会中断流动。无论如何，它不想保持在同一条线上，而您作为布局设计师需要解决这种布局会引入的歧义，例如当从每个方向运行的两列火车相互碰撞时该怎么办：- )

于 2012-09-20T11:19:00.897 回答
0

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

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

  • 将您的链接与 'display:block; float:right' 向右。
  • 现在设置“行高：40px；” 标题和链接

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

于 2012-09-20T11:22:16.923 回答
0

根据您的确切需求，一种可能的方法是使用表格布局：

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

于 2016-05-11T07:07:46.037 回答
-1

我有同样的问题..添加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>
于 2012-09-20T10:55:07.080 回答