det är lätt att infoga eller rita en horisontell linje i html. Men Hur ritar du en vertikal linje i html? Till skillnad från den horisontella linjen finns det ingen enda tagg i html som ritar den vertikala linjen. Men det betyder inte att det är omöjligt att göra det.
använda CSS
ett sätt att göra detta är att använda html-taggarna med kaskad stilark eller CSS.
vi använder div-taggen i html för att rita ett block på sidan. På Div-taggen kan du använda egenskapen border-left eller border-right för att rita blockets gränser. I kombination med div: s höjdegenskap kommer du att dra en vertikal linje med önskad längd.
<style>.vertical { height: 300px; border-left: 2px solid black; position: absolute; left: 50%;}</style><div class="vertical"/>
- höjd: höjden kan användas för att ange längden på raden på sidan.
- border-left: detta är ange vilken typ av linje du vill. exemplet är en solid svart linje med 2 pixeltjocklek. Du kan ha streckade linjer eller en mycket tjockare linje.
- position och vänster: dessa två anger tillsammans var på sidan du behöver linjen inriktad horisontellt. Alla attribut som placerar div på lämpligt sätt kan användas för att placera raden på sidan
utmatningen från ovanstående kod visas som en solid svart vertikal linje mitt på sidan.
det finns flera olika kombinationer som är möjliga. Du kan till exempel använda både egenskaperna kant-vänster och kant-höger tillsammans för att rita två vertikala linjer sida vid sida. Var noga med att ange bredden på div om du ritar två linjer. Det bestämmer avståndet mellan de två vertikala linjerna.
Du kan variera linjens storlek eller tjocklek med hjälp av pixelantalet. Nästan alla variationer som du kan använda för att rita en horisontell linje kan också användas för att rita den vertikala linjen.
att använda en behållartagg som div ger dig också möjlighet att rita en vertikal linje bredvid ett textblock, om det är vad du behöver. Med hjälp av en containertagg får du flexibiliteten att rita inte bara vertikala linjer utan också horisontella linjer runt texten. För att göra så kan du göra något så här:
<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>
Jag har använt attributet inline style i exemplen här, men helst skulle du använda ett externt stilark och du kan återanvända dessa med klassattributet. Det ger Dig möjlighet att ha konsekvent utseende och känsla på alla dina webbsidor.
använda hr-taggen
HTML-taggen för att infoga horisontell linje är hr-taggen. Du kan också använda samma tagg för att infoga den vertikala linjen, men du måste fortfarande ange bredd och storlek för att formatera linjen. Så, allt du förmodligen gör är att använda hr-taggen i stället för div-taggen i det tidigare exemplet.
ändå kan det vara ganska enkelt att använda om du inte behöver någon snygg formatering. Du anger breddattributet för att ställa in linjens tjocklek och storleksattributet för att ange linjens längd eller höjd.
<hr width="1" size="300"/>
använda div ger dig mycket mer flexibilitet i att styra storleken och typen av linje som du vill rita samt för att rita flera linjer. Tja, du kan rita den horisontella linjen precis på samma sätt, med hjälp av border-top eller border-bottom egenskaper istället för vänster och höger vi hade använt.