Float link "modifica" a destra di Titolo (deve tenere voce blocco tag)

Question

Dato il seguente codice 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> 

e il seguente CSS

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 { } 

Sto avendo un momento difficile capire come far flottare il link "modifica" a destra del tag h1, ma mantenendo il tag h1 come elemento di blocco in modo che abbia la sua sottolineatura (border-bottom)

Qualcuno può offrirmi qualche consiglio ... fatto questo prima? Grazie in anticipo

Answer 1

Ci sono diverse strategie per raggiungere questo obiettivo. Si può flottare un container per correggere un float o usare il contenuto generato per cancellare un float. Cercherò di spiegare entrambi w/codice. Per entrambi puoi mantenere il tuo markup, ma devi spostare la sottolineatura da h1 alla classe .header. Quindi sposta l'intestazione a sinistra, modifica a destra e correggi i float spostando anche la classe .header. Questa tecnica ha lo svantaggio di seconda di ciò che viene dopo, ma funziona per il vostro pezzo isolato di codice:

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%; } 

L'imho soluzione più bello è quello di usare i CSS-generated content per cancellare i carri opposte, invece di galleggiare il .header contenitore. Tuttavia, tieni presente che ciò causerà problemi con versioni del browser in grado di supportare 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%; } 

Per ulteriori informazioni sul primo metodo si veda l'articolo di Eric Meyer http://www.complexspiral.com/publications/containing-floats/. Il secondo metodo è documentato in http://www.positioniseverything.net/easyclearing.html.