Как вставить разделительную полосу в html
В данном пункте разберем создание горизонтальной линии с помощью блока div.
Для этого на м понадобится:
без текста
Далее нам понадобится attribute style
Вовнутрь помещаем свойство border + solid + 1px толщина линии + подбираем цвет( -> генератор цвета) пусть это будет » #d71212 «.
Соединим наш код горизонтальной сплошной линии вместе:
Пример вывода горизонтальной сплошной линии с помощью блока div
Добавим еще:
Пример вывода горизонтальной сплошной линии толщина 5px
Горизонтальная линия точками — css
В следующем пункте разберем, как сделать горизонтальную линию с помощью точек. Если в выше приведенном пункте унас была «горизонтальная линия сплошная«, то в этом пункте мы сделаем «горизонтальную линию точками!»
Для этого нам понадобится:
Опять будем использовать двойной тег div:
без текста
По той же схеме: border + только вместо сплошной, берем точками: dotted + 1px толщина линии, оставляем прежней + подбираем цвет( -> генератор цвета) цвет изменим, пусть это будет » #d71212 «.
Соединим наш код горизонтальной линии вместе:
Как сделать вертикальную линию в html
Для формирования линии можно пойти разными путями. Давайте рассмотрим некоторые из них:
Можно определить обычный div элемент и покрасить у него одну из сторон с помощью свойства border.
class="create-line">
.create-line height: 200px; border-left: 3px solid #32a1ce; >
С помощью псевдоэлементов :before или :after . Этот вариант немного сложнее, но за то мы обойдемся без правки HTML-кода. Итак, если нам нужно разместить вертикальную или горизонтальную линию сверху или с левой стороны элемента, то нам нужно использовать псевдоэлемент :before. Если же линия должна быть справа или снизу, то мы должны использовать псевдоэлемент :after.
class="create-line-left"> Добавим линию снизу
Теперь рассмотрим стили.
.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; >
Как сделать разделительную полосу в поле input
там где лупа и ввод текста есть полоса вертикальная, как ее сделать?
Отслеживать
задан 18 ноя 2016 в 13:11
81 2 2 золотых знака 3 3 серебряных знака 10 10 бронзовых знаков
Картинкой, псевдоэлементами. С исходным кодом было бы понятнее
18 ноя 2016 в 13:14
картину не добавляю, добавил иконку через fontawesome
18 ноя 2016 в 13:15
Думаю он имел ввиду слева есть блок с картинкой или вашей иконкой, у нее может быть border-right , а правее уже input . Но если честно я не знаю других путей сделать это, так что мне интересно 🙂
18 ноя 2016 в 13:24
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
form, .form-row < position: relative; >/* Иконка поиска */ label < width: 50px; position: absolute; top: 5px; left: 0px; bottom: 5px; line-height: 40px; text-align: center; color: #9a9a9a; border-right: 1px solid #afafaf; >/* Дополнительные стили для наглядности: */ form < padding-right: 100px; >/* Кнопка поиск */ input[type="submit"] < background: #269dc7; color: #fff; border:none; height: 50px; width: 100px; font-weight: bold; position: absolute; top: 0; right: 0; cursor: pointer; >/* Поле поиска */ input[type="search"]
Отслеживать
ответ дан 18 ноя 2016 в 13:47
22.4k 10 10 золотых знаков 56 56 серебряных знаков 119 119 бронзовых знаков
Если автору хочется вертикальную полоску внутри инпута, то можно и так:
input < background:#f5f5f5; border: 1px solid #dcdcde; padding:0 0 0 65px; height:30px; >.input-separator < width:1px; height:26px; display: block; border-left: 1px solid #dcdcde; position:absolute; left:30px; top:3px; >.input-block
Отслеживать
3,606 4 4 золотых знака 21 21 серебряный знак 43 43 бронзовых знака
ответ дан 18 ноя 2016 в 13:35
3,354 10 10 серебряных знаков 14 14 бронзовых знаков
Единственный вопрос. Почему мы делаем отступ для полосы сверху 3 px? По логике вещей, высота родителя — 30px, отнимаем -26px, получаем 4 пикселя в распоряжения. Сверху 2 и внизу 2(учитывая border родителя будет как раз отступ в 1 px), должно быть top:2px , но так прижимается к верхней части и я не пойму почему.
СSS стили для горизонтальных линий
Сборник горизонтальных линий с тегом
разных видов и стилей.
Сплошные линии
Двойная линия
Многострочная линия
Двухцветная линия
Трехцветная линия
Горизонтальный градиент
Вертикальный градиент
Линия с тенью
Замыленная линия
Линия «Полка»
Пунктирные линии
Пунктирная линия с фоном
Пунктирная линия с градиентом
Точечные линии
Линия из крупных точек
') 0 0 100% repeat; background-position: 50%; box-sizing: border-box; color: orange; >
Разное
Вертикальные линии
Линии под углом
'); background-size: 6px 6px; >
Наклонные линии
04.09.2018, обновлено 09.04.2021
Предыдущая запись Добавление CSS стилей на страницу
Следующая запись После отправки формы сохранить позицию скролла
Комментарии 2
6 апреля 2020 в 23:43
А можно в линиях под уголом сам угол поменять?
- Скопировать ссылку
- Пожаловаться
1 апреля 2023 в 20:33
да, число у deg меняйте:
transform:rotate(2deg);
и угол изменится
Авторизуйтесь, чтобы добавить комментарий.
Другие публикации
Подчеркивание текста можно сделать с помощью нескольких свойств CSS — background-image, background-size и.
Сборник CSS стилей с эффектом фильтров Инстаграма.
Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет.