浮动“编辑”链接标题的右侧（必须保持标题标签块）

Question

考虑下面的HTML

<div class="module">   
      <div class="header"> 
       <h1>Test Heading</h1> 
       <a href="">edit</a> 
      </div> 
      <div class="body"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu lacus at augue tristique dignissim. Nunc vitae porta lorem. Nullam eu nunc sit amet arcu dictum convallis. Vestibulum quis purus quis sem rhoncus imperdiet eget at nisl. Fusce non metus libero, vel viverra purus. Quisque ullamcorper congue risus vel adipiscing. Quisque vehicula ante in quam malesuada at porta diam gravida. Aenean sagittis, ipsum eget egestas malesuada, turpis neque aliquam metus, lobortis congue ligula nisi quis purus. Integer nec dui et elit suscipit ultrices et sit amet enim. Nulla euismod commodo metus, eget luctus urna dignissim in.</p> 
      </div> 
     </div> 

和

body { font-family: Helvetica, Arial, "Lucida Sans Unicode", Tahoma, Verdana, Arial, Helvetica, sans-serif; } 
      h1 { margin: 0; padding: 0; border-bottom: 3px solid #333333; color: #333333; font-size: 40px; font-weight: normal; letter-spacing: 0; line-height: 1.3em; } 

      .module { } 
       .module .header h1 { } 
       .module .header a { } 

我有一个艰难的时间搞清楚下面的CSS如何浮动h1标签右侧的“编辑”链接，但将h1标签保留为块元素，以便其具有下划线（边框底部）

任何人都可以提供一些建议...完成这之前？预先感谢您

Answer 1

有不同的策略来实现这一点。你可以浮动一个容器来修正一个浮点数或使用生成的内容来清空一个浮点数。我会试着解释w/code。既可以保留标记，也可以将下划线从h1移动到.header类。然后将标题浮动到左侧，编辑到右侧并通过浮动.header类来修复浮动。这种技术依赖于后随之而来的缺点，但是你的孤立的代码工作：

h1 { 
    margin: 0; 
    padding: 0; 
    color: #333333; 
    font-size: 40px; 
    font-weight: normal; 
    letter-spacing: 0; 
    line-height: 1.3em; 
} 

.header { border-bottom: 3px solid #333333; } 
.module .header h1 { float: left; } 
.module .header a { float: right; } 
.module .header { float: left; width: 100%; } 

的恕我直言更好的解决方案是使用CSS生成的内容清除反对浮动浮动.header代替容器。但请注意，这会在较少使用CSS的浏览器版本上造成麻烦。

h1 { 
    margin: 0; 
    padding: 0; 
    color: #333333; 
    font-size: 40px; 
    font-weight: normal; 
    letter-spacing: 0; 
    line-height: 1.3em; 
} 

.header { border-bottom: 3px solid #333333; } 
.header:after { content: "."; display: none; clear: both; } 
.module .header h1 { float: left; } 
.module .header a { float: right; } 
.module .header { width: 100%; } 

有关第一种方法的更多信息，请参阅Eric Meyer的文章http://www.complexspiral.com/publications/containing-floats/。第二种方法记录在http://www.positioniseverything.net/easyclearing.html中。