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

Leave a Comment / Css / By /

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

Нужно сделать, как на картинке:

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

.line {
  height:1px;
  margin:22px 0 26px 0;
  background:#c7c7c7;
  border-bottom:1px solid #fff;
}

Если сделать <hr> вместо <div>, то линия ведёт себя нормально, но там другие проблемы, поэтому <hr> не подходит. Скажите, можно ли так вообще сделать, и если можно то как?

  • css
  • вёрстка

Попробуйте оборачивать изображение в div с указанным цветом фона и паддингами равными необходимым отступам картинки.

<style type="text/css">
.line {
height:1px;
margin:22px 0 26px 0;
background:#c7c7c7;
border-bottom:1px solid #fff;
}
.img_wrapper {
float:left; 
padding:10px 10px 10px 0; 
background:#fff;
}
</style>
*текст*
<div><img src="" /></div>
*текст*
<div></div>
*текст*

Должно помочь в условиях одноцветного фона.

.line {
  height: 1px;
  margin: 10px 0 10px 0;
  background: #c7c7c7;
  border-bottom: 1px solid #fff;
  overflow: hidden;
}
img {
  float: left;
  margin-right: 5px;
}

b { animation: 1.5s infinite ease-in-out pulse; color: #b00; } @keyframes pulse { 50% { letter-spacing: 3px; } }
<img src="https://i.stack.imgur.com/I2dEX.png">
Достаточно добавить классу линии одно свойство:
<div></div>
<pre>.line {
  height: 1px;
  margin: 10px 0 10px 0;
  background: #c7c7c7;
  border-bottom: 1px solid #fff;
  <b>overflow: hidden;</b>
}</pre>
<div></div>
Вроде всё.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Добавление горизонтальных линий до и после заголовка или изображения на CSS – Блого-дарю

/ 6 комментариев

Для того, чтобы добавить в качестве обрамительного элемента горизонтальные линии до и после заголовка (картинки, логотипа и т.д.) можно использовать CSS и сделать при этом вполне адаптивный вариант.

Для этого нужно использовать псевдоэлементы :before и :after. Html-конструкция должна выглядеть следующим образом:

<div> <span>ЗАГОЛОВОК</span> </div>

<div>

    <span>ЗАГОЛОВОК</span>

</div>

Для основной обертки используем следующие CSS-правила:

.block { text-align: center; /* выравнивание заголовка по центру обертки */ width: 80%; /* ширина обертки. На самом деле для фиксированной верстки можно использовать и px, но лучше сразу адаптировать под разные устройства, т.к. это, что называется, тренди 🙂 */ margin: 0 auto; /* выравнивание обертки по центру документа */ overflow: hidden; /* прячем линии за границами обертки, чтобы в случае изменения ширины экрана линии не выходили за ее пределы */ }

1

2

3

4

5

6

. block {

    text-align: center;  /* выравнивание заголовка по центру обертки */

    width: 80%;          /* ширина обертки. На самом деле для фиксированной верстки можно использовать и px, но лучше сразу адаптировать под разные устройства, т.к. это, что называется, тренди 🙂 */

    margin: 0 auto;      /* выравнивание обертки по центру документа */

    overflow: hidden;    /* прячем линии за границами обертки, чтобы в случае изменения ширины экрана линии не выходили за ее пределы */

}

Для дочернего элемента <span> добавляем позиционирование, чтобы впоследствии управлять расположением линий в рамках обертки:

.block span { position: relative; }

.block span {

     position: relative;

}

Теперь перейдем непосредственно к оформлению псевдоэлементов (будущих линий):

. block span:before { display: block; /* делаем псевдоэлемент блоком для последующего работы с ним, как с простым div’ом */ width:1000px; /* устанавливаем ширину линию. Можно использовать произвольную ширину */ content: »; /* позволяет вставлять генерируемое содержание в текст страницы, которое первоначально в тексте отсутствует */ position: absolute; /* абсолютное позиционирование для управления линиями */ border-bottom: 1px solid #000; /* бордер псевдо дива, т.е. сама линия */ top:50%; /* позиционирование по вертикали */ right: 110px; /* позиционирование по горизонтали */ } /* аналогичные стили для второго псевдоэлемента */ .block span:after { display: block; width:1000px; content: »; position: absolute; border-bottom: 1px solid #000; top:50%; left: 110px; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

. block span:before {

    display: block;                  /* делаем псевдоэлемент блоком для последующего работы с ним, как с простым div’ом */

    width:1000px;                    /* устанавливаем ширину линию. Можно использовать произвольную ширину */

    content: »;                     /* позволяет вставлять генерируемое содержание в текст страницы, которое первоначально в тексте отсутствует */

    position: absolute;              /* абсолютное позиционирование для управления линиями */

    border-bottom: 1px solid #000;   /* бордер псевдо дива, т.е. сама линия */

    top:50%;                         /* позиционирование по вертикали */

    right: 110px;                    /* позиционирование по горизонтали */

}

 

/* аналогичные стили для второго псевдоэлемента */

 

.block span:after {

    display: block;

    width:1000px;

    content: »;

    position: absolute;

    border-bottom: 1px solid #000;

    top:50%;

    left: 110px;

}

Вот собственно все. Линии слева и справа от заголовка появились, они полностью на CSS, смотряться аккуратно как на десктопе, так и на мобильных устройствах.

Posted in: Верстка

css – Как создать частичную горизонтальную линию в HTML?

спросил

Изменено 1 год, 10 месяцев назад

Просмотрено 47 тысяч раз

Я хотел бы создать тонкую линию под основным заголовком на веб-странице по центру, что-то вроде этого. Как мне это сделать, используя /hr создаст сквозную линию.

  • HTML
  • CSS
1

В вашем примере это делается с помощью css, а не с помощью тега hr Таким образом, либо вы можете использовать границу в стиле css, как в вашем примере, либо вы действительно можете использовать hr-тег, который вы даете CSS, например:

Если вы хотите позиционировать час, вам может понадобиться position-style. Вы можете легко попробовать это на примере сайта w3c.

Помните, что атрибут hr-width (не стиль!) больше не работает в html5.

0

Вы можете использовать тег HR или тег HR с простым кодом CSS

HTML-тег HR:

 
Ваш код здесь

Здесь тег HR с простым кодом CSS:

 hr {
ширина: 50%;
поле слева: авто;
поле справа: авто;
} 
 
Ваш пример кода здесь

Примечание: Атрибуты, которые не поддерживаются в спецификации HTML5, связаны с внешним видом тега. Внешний вид должен быть установлен в CSS, а не в самом HTML.

Так что используйте тег

без атрибутов, затем настройте его в CSS, чтобы он отображался так, как вы хотите.

3

Можно настроить ширину пульса

Или в приведенном вами примере используется свойство css элемента div с нижней границей

 #yourDiv {
    нижняя граница: 1px сплошной серый;
}
1

можно сделать рестайлинг и добавить маржу к своему часу

 час {
  граница: нет;
  граница-верх:1px сплошная;/* или нижняя */
  маржа: 1em 15%; /* 15% или любое фиксированное или процентное значение, соответствующее вашим потребностям*/
  }

body {text-align:center;} 
  
Любой контент до
 
<ч/>

любой контент после
 

ширина также используется поле фиксированной ширины

 hr {
  граница: нет;
  граница-верх:1px сплошная;/* или нижняя */
  поле: 1em авто;
  ширина: 17 см;
  }

body {text-align:center;} 
  
Любой контент до
 
<ч/>

любой контент после

Вы также можете использовать нижнюю границу любого тега . ..

 h2 {
  нижняя граница: сплошная 1px;
  заполнение снизу: 0,5 см;
  дисплей: таблица; /* чтобы соответствовать ширине содержимого, в противном случае также работает отступ или фиксированная ширина */
  поле: 1em авто; /* если не отображается: таблица использует значения ширины или поля в качестве первого фрагмента */
  }

тело {выравнивание текста: центр;} 
  
Любой контент до
 

любой контент после

HTML:

CSS: . час { ширина: 50% цвет: #222 }

html:

  
 Ваш код 
 
     <час>

CSS:

 ч {
       выровнять содержимое: по центру;
       ширина: 20%;
       поле слева: авто;
       поле справа: авто;
        }

Настройки стиля hr должны выполняться в CSS, а не в теле.

Редактировать: Я использовал ширину, чтобы контролировать длину горизонтальной линии, которая будет отображаться под моим заголовком или текстом. Margin-left и margin-right :auto автоматически помещают линию в центр, где, как обычно, линия начинается на одном конце страницы и заканчивается на другом.

2

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

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

В этой статье рассказывается, как добавить горизонтальную линию справа и слева от текста, как показано ниже:

if(busy){

Перейти к завершению кода!

} еще {

1.

Создайте текстовый тег HTML.

В файле HTML создайте тег h3 и дайте ему имя класса hr-lines 

  
PEACE
Войти в полноэкранный режимВыйти из полноэкранного режима

2. Добавление левой линии

Мы воспользуемся псевдоэлементом CSS :before , чтобы добавить строку в левую часть текста. Примените приведенный ниже код к вашему файлу CSS: 

 .hr-lines:before{
  содержание:" ";
  дисплей: блок;
  высота: 2 пикселя;
  ширина: 130 пикселей;
  положение: абсолютное;
  верх: 50%;
  слева: 0;
  фон: красный;
}
Войти в полноэкранный режимВыйти из полноэкранного режима

Из приведенного выше кода мы создаем новый элемент высотой 2px и шириной 130px перед элементом hr-lines , используя свойство content, а затем присваивая ему абсолютный position, чтобы перемещать его, мы устанавливаем верх на 50% , чтобы выровнять его с текстом посередине.

3. Установите

часов-строк в относительную

Чтобы псевдоэлементы применялись к целевому элементу, мы должны установить позицию элемента относительной, это сделает все движения :до и :после относительно родителя (текст).

Добавьте следующие строки в файлы CSS. 

 .hr-строки{
  положение: родственник;
}
Войти в полноэкранный режимВыйти из полноэкранного режима

Результирующий вывод

Мы можем исправить это, установив max-width и добавив margin к элементу. 

 .hr-строки{
  положение: родственник;
  /* новые строки */
  максимальная ширина: 500 пикселей;
  поля: 100px авто;
  выравнивание текста: по центру;
}
Войти в полноэкранный режимВыйти из полноэкранного режима

Мы устанавливаем :before слева от текста, установив left:0 .

4. Добавляем правую линию

Мы воспользуемся псевдоэлементом :after , чтобы добавить нужную строку.

Добавьте следующие строки кода в файл CSS, чтобы добавить правильную строку в текст. 

 .hr-строки:после{
  содержание:" ";
  высота: 2 пикселя;
  ширина: 130 пикселей;
  фон: красный;
  дисплей: блок;
  положение: абсолютное;
  верх: 50%;
  справа: 0;
}
Войти в полноэкранный режимВыйти из полноэкранного режима

Мы устанавливаем :после справа от текста, установив right:0 .

Окончательный результат:

}

Полный код

index.html 

 
 МИР 
 
<раздел>
  <дел>
    
Я желаю мира в России и Украине
<раздел> Войти в полноэкранный режимВыйти из полноэкранного режима

index.css 

 .hr-lines{
 положение: родственник;
 максимальная ширина: 500 пикселей;
 поля: 100px авто;
 выравнивание текста: по центру;
}
.hr-строки: до {
 содержание:" ";
 высота: 2 пикселя;
 ширина: 130 пикселей;
 фон: красный;
 дисплей: блок;
 положение: абсолютное;
 верх: 50%;
 слева: 0;
}
.