Как добавить горизонтальную линию в css

Горизонтальная линия рядом с картинкой

Нужно сделать, как на картинке:
На всём сайте очень много горизонтальных линий (нарисована красным). Они должны быть по всей ширине блока. Но, если линия оказывается рядом с картинкой (с float:left/right ), то линия должна по ширине доходить только до картинки (+ ее margin ). А получается так, что линия растягивается на всю ширину и заходит под картинку. Линия сделана -ом:

.line

Если сделать

вместо , то линия ведёт себя нормально, но там другие проблемы, поэтому

не подходит. Скажите, можно ли так вообще сделать, и если можно то как?

Отслеживать

33k 6 6 золотых знаков 29 29 серебряных знаков 71 71 бронзовый знак

Как добавить линию за текст в css? [дубликат]

введите сюда описание изображения

Как реализовать горизонтальную линию за текстом как на картинке? Пробовал использовать свойство box-shadow — линия появляется ниже текста на несколько пикселей. Line-height не помогает т.к. меняется междустрочный интервал, а не отступ тени. Есть какое-нибудь свойство, которое указывает отступ box-shadow? Псевдоэлемент :after применяется ко всему тексту как к блоку, а не к строкам как на фото. Как реализовать подобную линию? Заранее спасибо

Как добавить горизонтальную линию в css

В данном пункте разберем создание горизонтальной линии с помощью блока div.

Для этого на м понадобится:

без текста

Далее нам понадобится attribute style

Вовнутрь помещаем свойство border + solid + 1px толщина линии + подбираем цвет( -> генератор цвета) пусть это будет » #d71212 «.

Соединим наш код горизонтальной сплошной линии вместе:

Пример вывода горизонтальной сплошной линии с помощью блока div

Добавим еще:

Пример вывода горизонтальной сплошной линии толщина 5px

Горизонтальная линия точками — css

В следующем пункте разберем, как сделать горизонтальную линию с помощью точек. Если в выше приведенном пункте унас была «горизонтальная линия сплошная«, то в этом пункте мы сделаем «горизонтальную линию точками!»

Для этого нам понадобится:

Опять будем использовать двойной тег div:

без текста

По той же схеме: border + только вместо сплошной, берем точками: dotted + 1px толщина линии, оставляем прежней + подбираем цвет( -> генератор цвета) цвет изменим, пусть это будет » #d71212 «.

Соединим наш код горизонтальной линии вместе:

Горизонтальные и вертикальные линии с помощью html и css

Всем привет! Сегодня я расскажу Вам о том, как с помощью html сделать горизонтальную линию.

На самом деле, необходимость сделать горизонтальную линию возникает достаточно часто, например, когда нужно отделить одну часть текста от другой.

Горизонтальная и вертикальная линии с помощью css

Сделать это можно с помощью css. Для этого, я заключаем необходимый участок текста в блок с помощью тега div, а затем в файле style.css или непосредственно в html — коде прописываем для этого блока свойства для верней или нижней границы с помощью border-top и border-bottom. Вот пример:

  Вертикальная HTML линия   Горизонтальная линия с помощью css.

В данном случае, я задал оформление с помощью css непосредственно из кода html, и сделал верхнюю границу сплошной, а нижнюю пунктирной линией.

Вот как это будет выглядеть на странице:

Горизонтальная линия с помощью css.

У этого способа есть свои преимущества:

Большой ассортимент настроек, которые позволяют задать практически любой вид для линии;
Можно создавать как горизонтальные так и вертикальные линии. Для того, чтобы сделать вертикальные линии необходимо поменять border-top на border-left, а border-bottom на border-right.

К недостаткам можно отнести относительную громоздкость кода.

Между прочим, если Вы еще не знаете что такое css и какие оно дает преимущества, то подробнее об этом можно прочитать здесь.

Однако, как оказалось, вставить в текст горизонтальную черту можно и с помощью html. При этом, даже не обязательно лезть в css. Для этого используется тег

Читать:

Как создать не анонимный опрос в телеграмме канале

Горизонтальная линия с помощью тега html

Первая особенность этого тега состоит в том, что у него нет парного закрывающего тега. Его можно использовать в любом месте html – кода между тегами и .

У этого тега есть следующие атрибуты:

Width – определяет длину нашей горизонтальной линии в пикселях или процентах;
Color – определяет цвет линии;
Align – задает выравнивание линии по правому краю – right, по левому краю – left, по центру – center;
Size – толщина линии в пикселях.

Вот пример html – кода:

А вот так он будет выглядеть:

Как видите, у данного способа есть свои недостатки:

Меньше настроек для линии;
Нельзя сделать вертикальную линию.

Зато этот способ намного проще.

Теперь Вы точно знаете о том, как сделать на своем сайте вертикальные и горизонтальные линии. Задать свои вопросы Вы можете в комментариях. И не забывайте подписываться на RSS.