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

时间:2012-02-17 20:03:15

标签: html css

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

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

我已经尝试了很多东西让“编辑”在底部与“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线高度,但同时他们觉得我更简洁。

5 个答案:

答案 0 :(得分:3)

你可能不需要所有的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;
 }

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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

您还可以为<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>

答案 3 :(得分:0)

这对我有用:

HTML:

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

CSS:

.header *{
    display: inline-block;
}

.header {
    text-align: left;
}

你也可以设置宽度等。

答案 4 :(得分:0)

更简单的方法是:

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

enter image description here

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