este suficient de ușor să introduceți sau să desenați o linie orizontală în html. Dar cum trageți o linie verticală în html? Spre deosebire de linia orizontală, nu există o singură etichetă în html care să deseneze linia verticală. Dar asta nu înseamnă că este imposibil să faci acest lucru.
folosind CSS
o modalitate de a face acest lucru este de a utiliza tag-uri html cu foi de stil cascadă sau CSS.
vom folosi eticheta div în html pentru a desena un bloc în pagină. Pe eticheta div, puteți utiliza proprietatea border-left sau border-right pentru a desena marginile blocului. Combinat cu proprietatea de înălțime a div, veți ajunge să desenați o linie verticală cu lungimea dorită.
<style>.vertical { height: 300px; border-left: 2px solid black; position: absolute; left: 50%;}</style><div class="vertical"/>
- înălțime: înălțimea poate fi utilizată pentru a specifica lungimea liniei de pe pagină.
- border-left: acesta este specificați ce fel de linie vă place. exemplul este o linie neagră solidă cu grosimea pixelilor 2. Puteți avea linii punctate sau o linie mult mai groasă.
- poziție și stânga: aceste două împreună specifică unde în pagină aveți nevoie de linia aliniată orizontal. Oricare dintre atributele care vor plasa div-ul în mod corespunzător poate fi utilizat pentru a poziționa linia pe pagina
ieșirea codului de mai sus se va afișa ca o linie verticală neagră solidă în mijlocul paginii.
există mai multe combinații diferite care sunt posibile. De exemplu, puteți utiliza atât proprietățile border-left, cât și border-right împreună pentru a desena două linii verticale una lângă alta. Asigurați-vă că specificați lățimea div-ului dacă desenați două linii. Aceasta va determina distanța dintre cele două linii verticale.
puteți varia dimensiunea sau grosimea liniei folosind numărul de pixeli. Aproape toate variantele pe care le puteți utiliza pentru a desena o linie orizontală pot fi folosite și pentru a desena linia verticală.
utilizarea unei etichete container, cum ar fi div, vă va oferi, de asemenea, posibilitatea de a desena o linie verticală lângă un bloc de text, dacă de asta aveți nevoie. Utilizarea unei etichete container vă oferă flexibilitatea de a desena nu numai linii verticale, ci și linii orizontale în jurul textului. Pentru a face acest lucru puteți face ceva de genul asta:
<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>
am folosit atributul de stil inline în exemplele de aici, dar ideal ar fi să folosiți o foaie de stil extern și le puteți reutiliza cu atributul class. Acest lucru vă va oferi posibilitatea de a avea un aspect consistent pe toate paginile dvs. web.
utilizarea etichetei hr
eticheta HTML pentru inserarea liniei orizontale este eticheta hr. Puteți utiliza aceeași etichetă și pentru introducerea liniei verticale, dar va trebui totuși să specificați lățimea și dimensiunea pentru a formata linia. Deci, tot ce faceți probabil este să utilizați eticheta hr în locul etichetei div din exemplul anterior.
totuși, poate fi destul de simplu de utilizat dacă nu aveți nevoie de formatare fantezistă. Specificați atributul lățime pentru a seta grosimea liniei și atributul dimensiune pentru a specifica lungimea sau înălțimea liniei.
<hr width="1" size="300"/>
utilizarea div vă va oferi mult mai multă flexibilitate în controlul dimensiunii și tipului de linie pe care doriți să o desenați, precum și pentru desenarea mai multor linii. Ei bine, ai putea desena linia orizontală la fel, folosind proprietățile border-top sau border-bottom în loc de stânga și dreapta pe care le-am folosit.