html - 将标题文本与同一行的后续文本对齐

Question

我尝试将“编辑”链接与标题放在同一行，位于页面右侧，链接文本与标题文本的底部对齐。我想要这样的东西:

want

我的第一次尝试是:

<div>
  <div style="float: left; width:600px;background-color: red">
     <h1>Something</h1>
  </div>
  <div style="float: left; background-color: yellow ">
    <a href=#>Edit</a>
  </div>
</div>

但这给了我:

got

我已经尝试了很多方法来使“编辑”与“某物”底部对齐，但似乎都不起作用。

有人有什么建议吗？像这样将所有内容包装在 div 中是错误的做法吗？

在此先感谢您的帮助。

编辑 - 哎呀，对不起，我把两张图片混在一起了。虽然文本是正确的，但我希望链接文本与标题文本底部对齐。现已修复。

更新

感谢那些提出建议和意见的人。

我想出了更多的可能性(尽管我意识到在退一步询问是否有更好的方法时，在某些选项中我因此稍微放宽了原始规范):

方案一:与chipcullen的建议类似，但在外层div中设置宽度。这样做的好处是可以将链接控制在​​ 600 像素的宽度范围内:

  <div style="position: relative; width: 600px">
    <h1>Solution 1</h1>
    <a style="position: absolute; bottom: 0; right: 0;href="#">Edit</a>
  </div><br/>

解决方案 2:与 (1) 一样，但使用我自己的类而不是 H1，并允许链接向右浮动。这具有不必使用 position: absolute 的优点(？)，但你仍然 需要设置margin-top。

 <div style="width: 600px">
   <span class="myHeader">Solution 2</span>
   <a style="float: right; margin-top:14px;" href="#">Edit</a>
 </div><br/>

解决方案 3:与 (2) 一样，但使用 h1 并覆盖显示属性。具有使用 h1 上别处定义的其他属性的优势:

 <div style="width: 600px">
   <h1 style="display:inline;">Solution 3</h1>
   <a style="float: right; margin-top:14px;" href="#">Edit</a>
 </div><br/>

解决方案 4:将链接元素嵌套在 h1 中，并为链接设置样式，在本例中通过指定 Twitter Bootstrap 按钮:

 <div style="width: 600px">
  <h1>Solution 4
      <a class="btn" style="margin-top:4px;float: right;" href="#">Edit</a>
  </h1>
 </div>

它们似乎都有效，有没有人对哪个更可取有任何想法？我猜解决方案 2 - 4 有点脆弱，因为硬连线 margin-top 设置取决于 h1 行高，但同时它们对我来说更简洁一些。

Answer 1

您可能不需要所有的 div。如果你真的想让它正常运行，你总是可以使用 position: absolute;

标记:

<header>
   <h1>Something</h1>
   <a class="edit_link" href="#">Edit</a>
</header>

CSS:

header {
  position: relative;
}

h1 {
  width: 600px;
 }

.edit_link {
   position: absolute;
   top: 0;
   right: 0;
 }

我并不是说这是唯一正确的方法，而是一种方法。