det er nemt nok at indsætte eller tegne en vandret linje i html. Men Hvordan tegner du en lodret linje i html? I modsætning til den vandrette linje er der ikke et enkelt tag i html, der tegner den lodrette linje. Men det betyder ikke, at det er umuligt at gøre det.
brug af CSS
en måde at gøre dette på er at bruge html-tags med cascading style sheets eller CSS.
Vi bruger div-tagget i html til at tegne en blok på siden. På div-mærket kan du bruge egenskaben grænse-venstre eller grænse-højre til at tegne grænserne for blokken. Kombineret med div ‘ ens højdeegenskab ender du med at tegne en lodret linje med den ønskede længde.
<style>.vertical { height: 300px; border-left: 2px solid black; position: absolute; left: 50%;}</style><div class="vertical"/>
- højde: højden kan bruges til at angive længden af linjen på siden.
- border-left: dette er angiv hvilken slags linje du kan lide. eksemplet er en solid sort linje med 2 billedtykkelse. Du kan have stiplede linjer eller en meget tykkere linje.
- position og venstre: disse to angiver sammen, hvor på siden du har brug for linjen justeret vandret. Enhver af de attributter, der placerer div ‘ en korrekt, kan bruges til at placere linjen på siden
udgangen af ovenstående kode vises som en solid sort lodret linje midt på siden.
der er flere forskellige kombinationer, der er mulige. Du kan f.eks. bruge egenskaberne kant-venstre og kant-højre sammen til at tegne to lodrette linjer side om side. Sørg for at angive bredden af div ‘ en, hvis du tegner to linjer. Det vil bestemme afstanden mellem de to lodrette linjer.
Du kan variere størrelsen eller tykkelsen af linjen ved hjælp af billedtællingen. Næsten alle variationer, som du kan bruge til at tegne en vandret linje, kan også bruges til at tegne den lodrette linje.
brug af et containermærke som div giver dig også mulighed for at tegne en lodret linje ved siden af en tekstblok, hvis det er det, du har brug for. Ved hjælp af en container tag giver dig fleksibilitet til at tegne ikke kun lodrette linjer, men vandrette linjer samt omkring teksten. For at gøre det kan du gøre noget som dette:
<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>
jeg har brugt attributten inline style I eksemplerne her, men ideelt set ville du bruge en ekstern stil ark, og du kan genbruge disse med klasseattributten. Det vil give dig mulighed for at have ensartet udseende på tværs af alle dine hjemmesider.
brug af hr-tagget
HTML-tagget til indsættelse af vandret linje er hr-tagget. Du kan også bruge det samme tag til at indsætte den lodrette linje, men du skal stadig angive bredden og størrelsen for at formatere linjen. Så alt hvad du sandsynligvis gør er at bruge hr-tagget i stedet for div-tagget i det tidligere eksempel.
alligevel kan det være ret nemt at bruge, hvis du ikke har brug for nogen fancy formatering. Du angiver breddeattributten for at indstille linjens tykkelse og størrelsesattributten for at angive linjens længde eller højde.
<hr width="1" size="300"/>
brug af div giver dig meget mere fleksibilitet til at kontrollere størrelsen og typen af linje, du vil tegne, samt til tegning af flere linjer. Nå, du kunne tegne den vandrette linje på samme måde ved at bruge egenskaberne kant-top eller kant-bund i stedet for venstre og højre, vi havde brugt.