phao "chỉnh sửa" liên kết bên phải của Tựa đề (phải giữ tiêu đề khối tag)

Question

Với html sau

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

và css sau

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

Tôi đang gặp một thời gian khó khăn để tìm ra làm thế nào để nổi liên kết "chỉnh sửa" ở bên phải của thẻ h1, nhưng giữ thẻ h1 dưới dạng phần tử khối để nó có gạch chân của nó (dưới cùng)

Bất kỳ ai cũng có thể cung cấp cho tôi một số lời khuyên ... điều này trước đây? Cảm ơn bạn trước

Answer 1

Có các chiến lược khác nhau để đạt được điều này. Bạn có thể thả nổi một container để sửa chữa một phao hoặc sử dụng nội dung được tạo ra để xóa một phao. Tôi sẽ cố gắng giải thích cả w/code. Đối với cả hai bạn có thể giữ cho đánh dấu của bạn, nhưng cần phải di chuyển gạch chân từ h1 đến lớp .header. Sau đó thả tiêu đề sang bên trái, chỉnh sửa sang phải và sửa các phao bằng cách thả nổi lớp .header. Kỹ thuật này có những bất lợi của phụ thuộc vào những gì đến sau đó, nhưng làm việc cho mảnh riêng biệt của bạn mã:

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

Các IMHO giải pháp đẹp hơn là sử dụng CSS-generated content để xóa nổi phản đối thay vì nổi các .header thùng đựng hàng. Nhưng lưu ý rằng điều này sẽ gây ra sự cố trên các phiên bản trình duyệt có khả năng CSS ít hơn.

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

Để biết thêm thông tin về phương pháp đầu tiên, hãy xem bài viết của Eric Meyer http://www.complexspiral.com/publications/containing-floats/. Phương pháp thứ hai được ghi lại trong http://www.positioniseverything.net/easyclearing.html.