Voglio rendere ciascuno di questi elementi una linea diversa, senza utilizzare <br /> in HTML, <h1> è un elemento di blocco, ma devo correggere il suo width. Come posso fare ancoraggi sotto <h1> non accanto?Creare una nuova riga senza utilizzare <br> in HTML
<h1 id="viewerTitle">Header </h1>
<a href="#" class="view-options">View options</a>
<a href="#" class="view-options">View options</a>
Ecco un esempio: http://jsfiddle.net/mmhhd/
Inizia rimuovendo float: left da h1.
Quindi aggiungere la regola:
a.view-options {
display: block;
}
Fai i tag di ancoraggio bloccano gli elementi pure.
utilizzare i CSS per fare i blocchi di collegamento ancoraggio tag:
a.view-options { display: block; }
Prova a modificare il jsfiddle per favore, l'ancora sembra andare prima dell'h1! – palAlaa
http://jsfiddle.net/RikudoSennin/mmhhd/2/ l'intestazione è fluttuante, quindi è chiaro un ordine. –
Usa CSS:
a {
display: block;
}
Per impostazione predefinita a tag è un elemento inline, quindi bisogna modificare la proprietà di visualizzazione.
Dalla descrizione CSS:
elementi a livello di blocco sono quegli elementi del documento sorgente che sono formattati visivamente come blocchi (ad esempio, paragrafi). I seguenti valori della proprietà 'display' rendono un elemento a livello di blocco: 'block', 'list-item' e 'table'.
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
Elementi a livello di sono quegli elementi del documento sorgente che non formano nuovi blocchi di contenuto; il contenuto è distribuito nelle righe (ad esempio, parti di testo enfatizzate all'interno di un paragrafo, immagini in linea, ecc.). I seguenti valori della proprietà 'display' rendono un elemento inline: 'inline', 'inline-table' e 'inline-block'. Gli elementi di livello in linea generano riquadri a livello interno, ovvero le caselle che partecipano a un contesto di formattazione incorporata.
Prendere galleggiare fuori dal tag h1 e fare che una tag: display: block;
modo alternativo:
Rimuovere float:left; in h1 e display: inline-block; in a.view-options
Quindi aggiungere
h1:after, a:after {
content:"\a";
white-space: pre;
}
Questo è il modo che funziona per me.
p.autonewline {white-space: pre-line;}
Questo è esattamente quello che stavo cercando! Rende html utilizza le nuove righe nel testo, come in textarea – lubosz
Questo era il punto :) – palAlaa
Perché è il punto? Non cambia la larghezza (impostando la larghezza lo fa); a meno che tu non voglia qualcosa alla destra dell'intestazione, non dovresti farlo fluttuare. – Kylos