Как сделать горизонтальную линию в css
В данном пункте разберем создание горизонтальной линии с помощью блока div.
Для этого на м понадобится:
Далее нам понадобится attribute style
Вовнутрь помещаем свойство border + solid + 1px толщина линии + подбираем цвет( -> генератор цвета) пусть это будет » #d71212 «.
Соединим наш код горизонтальной сплошной линии вместе:
Пример вывода горизонтальной сплошной линии с помощью блока div
Добавим еще:
Пример вывода горизонтальной сплошной линии толщина 5px
Горизонтальная линия точками — css
В следующем пункте разберем, как сделать горизонтальную линию с помощью точек. Если в выше приведенном пункте унас была «горизонтальная линия сплошная«, то в этом пункте мы сделаем «горизонтальную линию точками!»
Для этого нам понадобится:
Опять будем использовать двойной тег div:
По той же схеме: border + только вместо сплошной, берем точками: dotted + 1px толщина линии, оставляем прежней + подбираем цвет( -> генератор цвета) цвет изменим, пусть это будет » #d71212 «.
Соединим наш код горизонтальной линии вместе:
Горизонтальная линия между строками элементов списка — Вопросы по CSS
Сегодня важный день для проекта Joomla! Мы отмечаем два года напряженной работы наших добровольцев, решивших выпускать новую основную версию каждые два года. После большого количества обсуждений, спринтов по написанию кода и устранения ошибок этот день наконец настал и мы с гордостью объявляем о выпуске новой мажорной ( major ) версии Joomla 5.0, наряду с Joomla 4.4.
В Joomla Extensions Directory появился тег совместимости с Joomla 5.
Joomla-разработчики, проверившие совместимость своих расширений с Joomla 5 могут поставить галочку ��
JoomlaDay Spain, Madrid.
В Мадриде, Испания 5-6 октября 2023 года проходит Joomla Day — конференция, посвящённая как новичкам, так и профессионалам, работающим с Joomla.
Как провести горизонтальную линию по центру блока?
Приветствую!
Хочу провести линию по продольной оси по центру блока div .
Использую тег
. Тег вписал, толщину, цвет; но не знаю , как провести линию по центру. Она вырисовывается под верхним краем. Может что-то в CSS прописать?
hr align="center" color="green" size="3px" >
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как сделать горизонтальную линию между текстом
Каким образом можно сделать горизонтальную линию между словами как на картинке Когда пытаюсь.
Как задать горизонтальную линию с текстом посередине?
Всем привет! Пробую освоить верстку в html, сss, bootstrap. Столкнулся с такой задачей. Нужно.
Подскажите как сделать горизонтальную линию во всю ширину
Всех с праздником! Народ, подскажите как вставить полосу между строк в моём случае, чтобы было как.
Как убрать горизонтальную прокрутку (выравнивание стр. по центру)?
Добрый вечер, друзья! Подскажите, пожалуйста, как убрать горизонтальную прокрутку (страницу.
dev — investigator
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
Fatmarmelad, приведите пожалуйста весь код, демонстрирующий проблему. Не совсем понятен контекст использования.
Добавлено через 44 минуты
На всякий пожарный, оставлю здесь — https://codepen.io/qwerty_wasd/pen/aRmBKw
1 2 3 4 5 6
div> hr color="green" size="3px"/> /div> div> hr color="green" size="3px"/> /div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
*, *:after, *:before { box-sizing: border-box; padding: 0; margin: 0; outline: 0; } /*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/ body { display: flex; justify-content: space-around; } div { height: 100px; width: 100px; border: 2px solid #000000; } /* стили выше лишь косметика вся соль ниже, отсчет слева */ /* первый блок */ div:nth-of-type(1) { display: flex; } div:nth-of-type(1) > hr { margin: auto; width: 100%; } /* второй блок */ div:nth-of-type(2) { position: relative; } div:nth-of-type(2) > hr { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; }
Верстка заголовка с горизонтальной линией слева и справа от текста
Время от времени возникает необходимость сверстать необычный заголовок, в котором слева и/или справа от текста проходит горизонтальная линия, занимающая все свободное пространство. Выглядит это следующим образом (живой пример):
Заголовок с выравниванием слева
Заголовок с выравниванием по центру
Заголовок с выравниванием справа
Раньше для решения данной задачи я бы задействовал два тега: первому задал бы верхний бордюр, а второй сместил бы чуть вверх, задав ему белый фон и внутренний отступ слева и справа. Однако, эту задачу можно решить и другим, более красивым способом — использовав всего один тег. Кроме того, данный способ выручает в том случае, когда нет возможности вставить в исходный код второй тег. Как несложно догадаться, для добавления линий будут задействованы псевдоэлементы :before и :after . Вот CSS-код с комментариями для основных свойств, решающих поставленную задачу:
.title < /* чтобы линии не выходили за ширину блока заголовка */ overflow: hidden; >.title:before, .title:after < content: ''; /* делаем линию строчно-блочной */ display: inline-block; /* выравниваем вертикально по середине */ vertical-align: middle; /* не позволяем ширине превысить 100% (будет добавлен бордюр) */ box-sizing: border-box; /* установка ширины в 100% делает линию равной ширине тега заголовка ** благодаря этому линия заполнит все свободное пространство ** слева и справа от текста */ width: 100%; height: 3px; background: #6CBD83; /* добавляем к линии левый и правый бордюр цветом основного фона заголовка ** благодаря этому создается нужный отступ между линиями и текстом */ border: solid #FFF; border-width: 0 10px; >.title:before < /* смещаем левую линию влево отрицательным отступом, равным 100% ширины ** благодаря этому линия встает слева от текста */ margin-left: -100%; >.title:after < /* смещаем правую линию вправо отрицательным отступом, равным 100% ширины ** благодаря этому линия встает справа от текста */ margin-right: -100%; >Вот таким хитрым кодом это и делается. У меня есть еще один аналогичный вариант решения данной задачи — через абсолютное позиционирование псевдоэлементов :before и :after . Однако, он оказался непригодным к использованию из-за очередного бага в браузере Internet Explorer (даже в последних версиях).
Смотрите также
Стилизация чекбоксов и радиокнопок на чистом CSS с фолбеком для старых браузеров
105 комментариев
Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью .
Верстка красивых тегов для сайта + бонус
25 комментариев
Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала необходимо приготовить .
Зеленый свет CSS-свойствам при верстке под IE8 и выше
26 комментариев
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную плату, а для своих проектов забуду вообще. .
Комментарии (35)
Dimox, а можешь сделать раздвижку типа [текст]…[текст] — чтобы там где точечки раздвигалось? Как-то максимально компактно, чтобы не было лишней разметки.