浮動「編輯」鏈接標題的右側（必須保持標題標籤塊）

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中。