Как сделать вертикальную линию в html

4 года назад

Человек-Молекула

Присоединяйтесь к нашему Telegram-сообществу

Ответы

Для формирования линии можно пойти разными путями. Давайте рассмотрим некоторые из них:

Вариант №1.

Можно определить обычный div элемент и покрасить у него одну из сторон с помощью свойства border.

<div class="create-line"></div>

.create-line {
  height: 200px;
  border-left: 3px solid #32a1ce;
}

Вариант №2.

С помощью псевдоэлементов

или

. Этот вариант немного сложнее, но за то мы обойдемся без правки HTML-кода. Итак, если нам нужно разместить вертикальную или горизонтальную линию сверху или с левой стороны элемента, то нам нужно использовать псевдоэлемент

. Если же линия должна быть справа или снизу, то мы должны использовать псевдоэлемент

<div class="create-line-left">
  Добавим линию снизу
</div>

Теперь рассмотрим стили.

.create-line-left {
  padding-left: 20px;
  /* необходим для формирования позиций линии */
  position: relative;
  /* весь блок будет занимать ширину по размеру контента в нём */
  display: inline-block;
}

.create-line-left:before{ 
  content: " ";
  background: #33CCFF;
  width: 150px;
  height: 1px;
  /* располагаем линию сверху от текста */
  top: 25px;
  /* включаем абсолютное позиционирование относительно блока с relative */
  position: absolute;
}

3 года назад

Вячеслав Межуревский

Для создания вертикальной линии в HTML можно использовать различные способы, например, с помощью элементов с границей или специальных CSS-стилей. Вот несколько примеров:

Используя элемент с CSS:

<!DOCTYPE html>
<html>
<head>
    <style>
        .vertical-line {
            border-left: 1px solid black;
            height: 100px; /* Высота линии */
        }
    </style>
</head>
<body>
    <div class="vertical-line"></div>
</body>
</html>

Используя элемент с CSS:

<!DOCTYPE html>
<html>
<head>
    <style>
        .vertical-line {
            border-left: 1px solid black;
            height: 100px; /* Высота линии */
        }
    </style>
</head>
<body>
    <div class="vertical-line"></div>
</body>
</html>

Используя только CSS:

<!DOCTYPE html>
<html>
<head>
    <style>
        .vertical-line {
            width: 1px;
            height: 100px; /* Высота линии */
            background-color: black;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="vertical-line"></div>
</body>
</html>

год назад

Ivan Gagarinov

5 месяцев

Профессиональная верстка

Навык адаптивной вёрстки с современными подходами для корректного отображения сайтов на любых устройствах и разрешениях

1 месяц

Позиционирование в CSS

Навык разработки адаптивных интерфейсов, позволяющий создавать удобные и функциональные решения для различных устройств

1 месяц

Основы веб-разработки

Основы HTML, CSS, блочная модель, основы Javascript, синтаксис, арифметика, условия, циклы, функции, поиск ошибок

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

1 месяц

Основы JavaScript

Синтаксис, основы программирования, переменные, строки, арифметика, условные конструкции, циклы, функции, модули

Похожие вопросы