je snadné vložit nebo nakreslit vodorovnou čáru do html. Ale jak nakreslíte svislou čáru v html? Na rozdíl od vodorovné čáry neexistuje v html žádná značka, která by nakreslila svislou čáru. To však neznamená, že to není možné.
použití CSS
jedním ze způsobů, jak toho dosáhnout, je použití značek html s kaskádovými styly nebo CSS.
použijeme značku div v html k nakreslení bloku na stránce. Na značce div můžete použít vlastnost border-left nebo border-right k nakreslení okrajů bloku. V kombinaci s výškovou vlastností div skončíte nakreslením svislé čáry požadované délky.
<style>.vertical { height: 300px; border-left: 2px solid black; position: absolute; left: 50%;}</style><div class="vertical"/>
- výška: výšku lze použít k určení délky řádku na stránce.
- border-left: to je určit, jaký druh řádku se vám líbí. příkladem je plná černá čára o tloušťce 2 Pixelů. Můžete mít přerušované čáry nebo mnohem silnější čáru.
- pozice a vlevo: tyto dva společně určují, kde na stránce potřebujete čáru zarovnanou vodorovně. Jakýkoli z atributů, které vhodně umístí div, lze použít k umístění řádku na stránce
výstup výše uvedeného kódu se zobrazí jako plná černá svislá čára uprostřed stránky.
existuje několik různých kombinací, které jsou možné. Můžete například použít vlastnosti ohraničení vlevo i ohraničení vpravo k nakreslení dvou svislých čar vedle sebe. Nezapomeňte zadat šířku div, pokud kreslíte dva řádky. To určí vzdálenost mezi dvěma svislými čarami.
velikost nebo tloušťku čáry můžete měnit pomocí počtu pixelů. Téměř všechny varianty, které můžete použít k nakreslení vodorovné čáry, lze také použít k nakreslení svislé čáry.
použití značky kontejneru, jako je div, vám také dá možnost nakreslit svislou čáru vedle bloku textu, pokud to potřebujete. Použití značky kontejneru vám dává flexibilitu při kreslení nejen svislých čar, ale i vodorovných čar kolem textu. Chcete-li tak učinit, můžete udělat něco takového:
<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>
použil jsem inline styl atribut v příkladech, ale v ideálním případě byste použít externí styl list a můžete znovu použít tyto s atribut class. To vám dá možnost mít konzistentní vzhled a dojem na všech vašich webových stránkách.
pomocí hr tagu
HTML tag pro vložení vodorovné čáry je hr tag. Stejnou značku můžete použít také pro vložení svislé čáry, ale stále budete muset zadat šířku a velikost pro formátování čáry. Takže vše, co pravděpodobně děláte, je použití značky hr namísto značky div v předchozím příkladu.
přesto, to může být docela jednoduché použití, pokud nepotřebujete žádné fantazie formátování. Určíte atribut Šířka pro nastavení tloušťky čáry a atribut velikost pro určení délky nebo výšky čáry.
<hr width="1" size="300"/>
Pomocí div vám dá mnohem větší flexibilitu v ovládání velikost a typ čáry, kterou chcete nakreslit, stejně jako pro kreslení více řádků. Můžete nakreslit vodorovnou čáru stejným způsobem, pomocí vlastností ohraničení-horní nebo ohraničení-dolní místo levé a pravé, které jsme použili.