Tạo dòng mới mà không cần sử dụng <br> trong HTML

Question

Tôi muốn làm cho mỗi thành phần này là một dòng khác nhau, không sử dụng <br /> trong HTML, <h1> là phần tử khối nhưng tôi phải sửa chữa width. Làm thế nào tôi có thể làm cho neo đến dưới <h1> không bên cạnh?

<h1 id="viewerTitle">Header </h1> 
<a href="#" class="view-options">View options</a> 
<a href="#" class="view-options">View options</a> 

Dưới đây là một ví dụ: http://jsfiddle.net/mmhhd/

Answer 1

Bắt đầu bằng cách loại bỏ float: left từ h1.

Sau đó, thêm quy tắc:

a.view-options { 
    display: block; 
} 

Answer 2

Tận dụng thẻ neo chặn các yếu tố là tốt.

Answer 3

Sử dụng CSS để làm cho các thẻ liên kết neo khối:

a.view-options { display: block; } 

Answer 4

Sử dụng CSS:

a { 
    display: block; 
} 

Theo mặc định a tag là một yếu tố nội tuyến, vì vậy bạn phải thay đổi thuộc tính hiển thị của nó.

Từ đặc điểm kỹ thuật CSS:

yếu tố Block cấp là những yếu tố của văn bản nguồn được định dạng trực quan như các khối (ví dụ, đoạn văn). Các giá trị sau của thuộc tính 'display' tạo thành một khối phần tử: 'block', 'list-item' và 'table'.

http://www.w3.org/TR/CSS2/visuren.html#block-boxes

yếu tố Inline cấp là những yếu tố của tài liệu nguồn mà không tạo khối mới của nội dung; nội dung được phân phối trong các dòng (ví dụ: các phần văn bản được nhấn mạnh trong một đoạn, hình ảnh nội tuyến, v.v.). Các giá trị sau của thuộc tính 'hiển thị' tạo thành phần tử cấp nội tuyến: 'nội dòng', 'bảng nội tuyến' và 'nội dòng chặn'. Phần tử cấp nội tuyến tạo các hộp cấp nội tuyến, là các hộp tham gia vào ngữ cảnh định dạng nội tuyến.

http://www.w3.org/TR/CSS2/visuren.html#inline-boxes

Answer 5

Hãy nổi ra khỏi thẻ h1 và làm hiển thị một tag: display: block;

Answer 6

cách Alternative:

Di float:left; trong h1 và display: inline-block; trong a.view-options

Sau đó, thêm

h1:after, a:after { 
    content:"\a"; 
    white-space: pre; 
} 

Xem http://jsfiddle.net/8my6q/

Answer 7

Đây là cách làm việc cho tôi.

p.autonewline {white-space: pre-line;}