Question

我想将“编辑”链接放在与标题相同的行上，在页面右侧，链接文本与标题文本的底部对齐。我想要这样的东西：

我的第一次尝试是：

<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

我已经尝试了很多东西让“编辑”在底部与“Something”对齐，但似乎都没有。

有人有任何建议吗？像这样把div中的所有内容包装成错误的方法吗？

提前感谢您的帮助。

编辑 - 呃，对不起，我把这两个图像混合在一起。文本是正确的，我希望链接文本与标题文本底部对齐。现在修好了。

更新

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

我想出了更多的可能性（虽然我意识到退后一步并询问是否有更好的方法，在某些选项中我因此放宽了原始规格）：

解决方案1：类似于chipcullen的建议，但在外部div中设置宽度。这样做的好处是可以将链接带到600px宽度范围内：

  <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，并允许链接向右浮动。这有利于（？）不必使用位置：绝对，但你仍然需要设置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并覆盖display属性。具有使用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中，并为链接设置样式，在这种情况下通过指定a 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我觉得有点脆弱，因为硬连线边缘顶部设置取决于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;
 }

我不是说这是唯一正确的方式，而是方式。

Answer 2

尝试将此css添加到编辑浮动

{
margin:0px;
padding:0px;
border:0px;
}

Answer 3

您还可以为<div>标记使用两个类。例如#header和#header-right。这是我通常使用的。

示例：

#header {
  width: 98%;
  min-width: 750px;
  height : 45px;
  margin : 0 auto;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom : 4px;
  color : #ffffff;
  background: #999999; 
  border-bottom: 1px solid #000000;
}

#header-right {
  padding-top: 10px;
  padding-right: 10px;
  float: right;
}

HTML：

<div id="header">
  <h1 ><a href="http://mysite.com">MySite.com</a></h1>
  <p>A site for me. Not you.</p>
  <div id="header-right">
    <p>Because who wants to share a website...</p>
  </div>
</div>

Answer 4

这对我有用：

HTML：

<div class="header">
    <h1>Title</h1>
    <div>Edit</div>
</div>

CSS：

.header *{
    display: inline-block;
}

.header {
    text-align: left;
}

你也可以设置宽度等。

Answer 5

更简单的方法是：

<div>
    <a style="float:right; clear:left" href=#>Edit</a>
    <h1>Something</h1>
</div>

请务必将标题放在链接后面，这样链接就不会消失在下面的html中。

将标题文本与后续文本对齐在同一行

更新

5 个答案: