How to Create Vertical Line in HTML
You might have a couple of reasons to create a vertical line on your web page but HTML does not have any element for vertical lines. Although HTML only have the element for a horizontal line; but still there are multiple ways to create a vertical line in HTML as mentioned below:
- Using Border CSS Property
- Using width and height CSS Property
- Using hr Transform Property
Here in this article, we have explained all possible ways to create Vertical line in HTML:
1) Using Border-Right, Height and Position CSS Property
OUTPUT
2) Vertical line using Border-Left, Height, and Position CSS Property
3) Vertical line using hr Transform Property
A vertical line can be created in HTML using transform property in <hr> tag. With the help of this property, you can rotate a horizontal line to a vertical line.
Как сделать вертикальную линию в HTML
Поместите <div> вокруг разметки, где вы хотите, чтобы строка отображалась в следующем порядке, и используйте CSS для ее стилизации:
Вы можете использовать тег горизонтального правила для создания вертикальных линий.
Используя минимальную ширину и большой размер, горизонтальное правило становится вертикальным.
Вы можете использовать пустой <div> , который будет выглядеть так, как вы хотите, чтобы строка появлялась:
HTML:
С точной высотой (переопределение стиля в строке):
Настройте границу, если хотите 3D-вид:
Конечно, вы также можете экспериментировать с расширенными комбинациями:
Вы также можете сделать вертикальную линию, используя горизонтальную линию HTML <hr />
Нет вертикального эквивалента элемента <hr> . Однако одним из способов, который вы можете попробовать, является использование простой границы слева или справа от того, что вы отделяете:
Файл CSS
Файл HTML
HTML5 пользовательские элементы (или чистый CSS)
1. Javascript
Зарегистрируйте свой элемент.
* — обязателен во всех пользовательских элементах.
2. CSS
* Возможно, вам нужно немного поиграть с display:inline-block|inline , потому что inline не будет расширяться до уровня высоты элемента. Используйте границу, чтобы центрировать линию внутри контейнера.
3. экземпляр
* К сожалению, вы не можете создавать собственные самозакрывающиеся теги.
Использование
Не хотите вступать в javascript?
Просто примените этот класс CSS к назначенному элементу.
* См. примечания выше.
Еще один вариант — использовать 1-пиксельное изображение и установить высоту — этот параметр позволит вам перемещать его туда, где вам нужно быть.
Не самое элегантное решение.
Вы можете использовать тег hr (горизонтальная линия) и повернуть его на 90 градусов с помощью css ниже
это также будет сделано так. просто поверните горизонтальную линию
Теперь у вас будет вертикальная линия и не забудьте добавить размер hr
Я использовал комбинацию предложенного кода «hr», и вот как выглядит мой код:
Я просто изменил значение «левого» пикселя, чтобы поместить его. (Я использовал вертикальную линию для составления содержимого на моей веб-странице, а затем я удалил ее.)
Спасибо всем, кто разместил их решения!
Почему бы не использовать & # 124, который является специальным символом html для |
Нет никаких тегов для создания вертикальной строки в HTML.
Метод: вы загружаете изображение линии. Затем вы устанавливаете свой стиль как «height: 100px ; width: 2px»
Метод: вы можете использовать теги <td> <td style=»border-left: 1px solid red; padding: 5px;»> X </td>
возможен еще один подход: использование SVG.
- Вы можете иметь строку любой длины и ориентации.
- Вы можете легко указать ширину, цвет
- SVG теперь поддерживается в большинстве современных браузеров. Но некоторые старые браузеры (например, IE 8 и старше) не поддерживают его.
Если ваша цель — разместить вертикальные линии в контейнере для разделения дочерних элементов «бок о бок» (элементы столбца), вы можете подумать о стилизации контейнера следующим образом:
Это добавляет левую границу всем дочерним элементам, начиная с 2-го ребенка. Другими словами, вы получаете вертикальные границы между соседними детьми.
- > — дочерний селектор. Он соответствует любому дочернему элементу (-ам), указанному слева.
- * — универсальный селектор. Он соответствует элементу любого типа.
- :not(:first-child) означает, что это не первый дочерний элемент его родителя.
Я думаю, что это лучше простого правила .child-except-first
Будет ли это лучше, чем использование временного элемента вертикального правила (путем стилизации горизонтального правила и т.д.), будет зависеть от вашего варианта использования, но это альтернатива по крайней мере.
Html вертикальное отделение как hr
Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.
What can I do to prevent this in the future?
If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.
If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.
Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.
Cloudflare Ray ID: 71a897de7c4568eb • Your IP : 82.102.23.104 • Performance & security by Cloudflare
How to create a vertical line using HTML and CSS
To create a vertical line using HTML and CSS, you can set a CSS rule for <hr> tags with the class vertical as follows:
First, you need to normalize the default border and margin properties added by the browser.
Next, the width, style, and color of the vertical line is set using the shorthand border-left property, while the height property will set the height of the vertical line.
The float:left property is added so that the vertical line can be displayed on the left side of another element.
The following HTML markup:
Will produce the following output:
Alternatively, you can also remove the <hr> tag and create a vertical line by adding a border-left or border-right property to any element that you want to have a vertical line.
For example, here’s how to add a vertical line on the right side of the <p> tag:
The example below:
Will produce the following output:
You will need to adjust the CSS style depending on the context and where you want to place the vertical line. But a vertical line can always be created using the <hr> tag.
If you need to add the vertical line on the side of another element, you can use either the border-left or border-right property with the attached element.
Level up your programming skills
I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!
report this ad
About
Sebhastian is a site that makes learning programming easy with its step-by-step, beginner-friendly tutorials.
Learn JavaScript and other programming languages with clear examples.
Search
Type the keyword below and hit enter
report this ad
Click to see all tutorials tagged with:
report this ad