Utwórz nową linię bez użycia <br> w HTML

Question

Chcę, aby każdy z tych elementów był inną linią, bez użycia <br /> w HTML, <h1> jest elementem blokowym, ale muszę naprawić jego width. W jaki sposób mogę sprawić, by kotwice stały się niepołączone z <h1>?

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

Oto przykład: http://jsfiddle.net/mmhhd/

Answer 1

start usuwając float: left od h1.

Następnie dodać zasadę:

a.view-options { 
    display: block; 
} 

Answer 2

Dodać znaczniki anchor zablokować elementy, jak również.

Answer 3

użyć CSS, aby znaczniki Link kotwica bloki:

a.view-options { display: block; } 

Answer 4

Zastosowanie CSS:

a { 
    display: block; 
} 

Domyślnie a tag jest elementem inline, więc trzeba zmienić jego właściwości wyświetlacza.

z opisu CSS

elementy blokowe są te elementy pliku źródłowego, które są sformatowane wizualnie jako bloki (na przykład, paragrafy). Następujące wartości właściwości "display" powodują, że element blokuje poziom: "block", "list-item" i "table".

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

elementów Inline szczebla są te elementy dokumentu źródłowego, który nie tworzą nowych bloków treści; treść jest dystrybuowana w wierszach (np. podkreślone fragmenty tekstu w akapicie, obrazy śródliniowe, itp.). Następujące wartości właściwości "display" powodują, że element inline-level: inline, inline-table i inline-block. Elementy śródliniowe generują pola śródliniowe, czyli pola , które uczestniczą w wbudowanym kontekście formatowania.

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

Answer 5

Take unosić off tag H1 i wprowadzania wyświetlacz D Tagi: display: block;

Answer 6

alternatywny sposób:

Usuń float:left; w h1 i display: inline-block; w a.view-options

Następnie dodaj

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

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

Answer 7

ten sposób, że pracuje dla mnie.

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