Как можно добавить текст к линии?

Question

Елена

javascript

Как можно добавить текст к линии?

Как создать веб-страницу, чтобы она имела такой же вид, как на скриншоте, доступном по ссылке: https://jsbin.com/tevegucafo/1/edit?html,css,js,output?

13 мая 2024 г. 12:20

Ответы на вопрос 1

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

Answer 1

Чтобы добавить текст к линии в HTML, вы можете использовать элемент <span> или <div> и применить стили CSS для этих элементов, чтобы они были выровнены и отображались рядом с линией.

Пример кода для добавления текста к линии:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Добавление текста к линии</title>
<style>
.line-container {
  position: relative;
  width: 200px;
}

.line {
  width: 100%;
  border-bottom: 2px solid black;
}

.text {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  padding: 0 10px;
}
</style>
</head>
<body>

<div class="line-container">
  <div class="line"></div>
  <div class="text">Текст на линии</div>
</div>

</body>
</html>
```

Чтобы создать веб-страницу с таким же видом, как на скриншоте по ссылке, вы можете скопировать и вставить код из ссылки в редактор кода, например в VS Code или онлайн-редактор кода, и открыть его в браузере. Вам также может понадобиться подключение к интернету для загрузки дополнительных ресурсов, например шрифтов и изображений.