È abbastanza facile inserire o disegnare una linea orizzontale in html. Ma come si disegna una linea verticale in html? A differenza della linea orizzontale, non esiste un singolo tag in html che disegnerà la linea verticale. Ma ciò non significa che sia impossibile farlo.
Usando CSS
Un modo per farlo è usare i tag html con fogli di stile a cascata o CSS.
Useremo il tag div in html per disegnare un blocco nella pagina. Sul tag div, è possibile utilizzare la proprietà border-left o border-right per disegnare i bordi del blocco. Combinato con la proprietà height del div, finirai per disegnare una linea verticale della lunghezza desiderata.
<style>.vertical { height: 300px; border-left: 2px solid black; position: absolute; left: 50%;}</style><div class="vertical"/>
- altezza: l’altezza può essere utilizzata per specificare la lunghezza della linea sulla pagina.
- border-left: questo è il specificare che tipo di linea che ti piace. l’esempio è una linea nera solida di 2 pixel di spessore. Puoi avere linee tratteggiate o una linea molto più spessa.
- posizione e sinistra: questi due insieme specificano dove nella pagina è necessaria la linea allineata orizzontalmente. Uno qualsiasi degli attributi che posizioneranno il div in modo appropriato può essere utilizzato per posizionare la linea sulla pagina
L’output del codice precedente verrà visualizzato come una linea verticale nera solida al centro della pagina.
Ci sono diverse combinazioni che sono possibili. Ad esempio, è possibile utilizzare entrambe le proprietà bordo-sinistra e bordo-destra insieme per disegnare due linee verticali affiancate. Assicurati di specificare la larghezza del div se stai disegnando due linee. Ciò determinerà la distanza tra le due linee verticali.
È possibile variare la dimensione o lo spessore della linea utilizzando il numero di pixel. Quasi tutte le variazioni che è possibile utilizzare per disegnare una linea orizzontale possono essere utilizzati per disegnare la linea verticale pure.
L’utilizzo di un tag contenitore come div ti darà anche la possibilità di disegnare una linea verticale accanto a un blocco di testo, se questo è ciò di cui hai bisogno. L’utilizzo di un tag contenitore offre la flessibilità di disegnare non solo linee verticali, ma anche linee orizzontali attorno al testo. Per farlo puoi fare qualcosa del genere:
<div style="border-left: 2px solid black; border-right: 2px dashed green; width: 70em;"> <div style="padding-left: 2em;"> <p>The output of the above code will display as a solid black vertical line in the middle of the page.</p> <p>There are several different combinations that are possible. For example, you can use both the border-left and the border-right properties together to draw two vertical lines side by side. Be sure to specify the width of the div if you are drawing two lines. That will determine the distance between the two vertical lines.</p> <p>You can vary the size or thickness of the line using the pixel count. Almost all variations that you can use to draw a horizontal line can be used to draw the vertical line as well.</p> </div></div>
ho usato lo stile inline attributo negli esempi qui, ma l’ideale sarebbe utilizzare un foglio di stile esterno ed è possibile ri-utilizzare questi con l’attributo class. Questo ti darà la possibilità di avere un aspetto coerente su tutte le tue pagine web.
Utilizzando il tag hr
Il tag HTML per l’inserimento della linea orizzontale è il tag hr. Puoi usare lo stesso tag anche per inserire la linea verticale, ma dovrai comunque specificare la larghezza e la dimensione per formattare la linea. Quindi, tutto ciò che probabilmente stai facendo è usare il tag hr al posto del tag div nell’esempio precedente.
Tuttavia, può essere abbastanza semplice da usare se non hai bisogno di alcuna formattazione di fantasia. Si specifica l’attributo width per impostare lo spessore della linea e l’attributo size per specificare la lunghezza o l’altezza della linea.
<hr width="1" size="300"/>
Utilizzando il div vi darà molta più flessibilità nel controllare la dimensione e il tipo di linea che si desidera disegnare così come per disegnare più linee. Bene, potresti disegnare la linea orizzontale allo stesso modo, usando le proprietà border-top o border-bottom invece di sinistra e destra che avevamo usato.