łatwo jest wstawić lub narysować poziomą linię w html. Ale jak narysować pionową linię w html? W przeciwieństwie do linii poziomej, nie ma jednego znacznika w html, który narysuje linię pionową. Ale to nie znaczy, że jest to niemożliwe.
używanie CSS
jednym ze sposobów jest użycie znaczników html z kaskadowymi arkuszami stylów lub CSS.
użyjemy znacznika div w html do narysowania bloku na stronie. W znaczniku div możesz użyć właściwości border-left lub border-right, aby narysować granice bloku. W połączeniu z właściwością height div, w końcu narysujesz pionową linię o żądanej długości.
<style>.vertical { height: 300px; border-left: 2px solid black; position: absolute; left: 50%;}</style><div class="vertical"/>
- height: wysokość może być użyta do określenia długości linii na stronie.
- border-left: to jest określenie, jaki rodzaj linii chcesz. przykładem jest ciągła czarna linia o grubości 2 pikseli. Możesz mieć przerywane linie lub znacznie grubszą linię.
- pozycja i lewo: te dwa razem określają, gdzie na stronie potrzebujesz linii wyrównanej poziomo. Każdy z atrybutów, który odpowiednio umieści div, może być użyty do pozycjonowania linii na stronie
wyjście powyższego kodu będzie wyświetlane jako czarna pionowa linia na środku strony.
istnieje kilka różnych kombinacji, które są możliwe. Na przykład, możesz użyć właściwości obramowanie-lewo i obramowanie-prawo razem, aby narysować dwie pionowe linie obok siebie. Pamiętaj, aby określić szerokość div, jeśli rysujesz dwie linie. To określi odległość między dwiema pionowymi liniami.
możesz zmienić rozmiar lub grubość linii za pomocą liczby pikseli. Prawie wszystkie warianty, których można użyć do narysowania linii poziomej, mogą być również użyte do narysowania linii pionowej.
użycie znacznika kontenera, takiego jak div, daje również możliwość narysowania pionowej linii obok bloku tekstu, jeśli tego potrzebujesz. Użycie znacznika kontenera umożliwia rysowanie nie tylko pionowych, ale także poziomych linii wokół tekstu. Aby to zrobić, możesz zrobić coś takiego:
<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>
użyłem atrybutu stylu wbudowanego w przykłady tutaj, ale najlepiej byłoby użyć zewnętrznego arkusza stylów możesz użyć ich ponownie z atrybutem class. To da Ci możliwość spójnego wyglądu i działania na wszystkich stronach internetowych.
używanie znacznika hr
znacznikiem HTML do wstawiania poziomej linii jest znacznik hr. Możesz użyć tego samego znacznika do wstawiania pionowej linii, ale nadal będziesz musiał określić szerokość i rozmiar, aby sformatować linię. Wszystko, co prawdopodobnie robisz, to użycie znacznika hr zamiast znacznika div we wcześniejszym przykładzie.
mimo to może być dość prosty w użyciu, jeśli nie potrzebujesz żadnego fantazyjnego formatowania. Możesz określić atrybut szerokość, aby ustawić grubość linii i atrybut rozmiar, aby określić długość lub wysokość linii.
<hr width="1" size="300"/>
Korzystanie z div daje o wiele większą elastyczność w kontrolowaniu rozmiaru i typu linii, którą chcesz narysować, a także do rysowania wielu linii. Możesz narysować poziomą linię w ten sam sposób, używając właściwości border-top lub border-bottom zamiast lewego i prawego, których użyliśmy.