Стиль <hr> элемент для установки между двумя пролетами

элементный вывод ">

Как я могу сделать пунктирную <hr />линию на том же уровне, что и два окружающих <span></span>?

1-1
1 принят

Вы можете выполнить следующий код:

Html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="question-line-row">
    <span>Test Text</span>
    <hr class="true-and-false-line" />
    <span>test text</span>
</div>

</body>
</html>

Css:

.question-line-row{
  display: flex;
  align-items: center
}
.true-and-false-line{
  border-bottom: 2px solid red;
  flex: 1;
}
span{
  margin: 5px;
}
HTML, CSS,

html,css,

-1

Ответов: 1

элементный вывод ">

Как я могу сделать пунктирную <hr />линию на том же уровне, что и два окружающих <span></span>?

1-1
1 принят

Вы можете выполнить следующий код:

Html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="question-line-row">
    <span>Test Text</span>
    <hr class="true-and-false-line" />
    <span>test text</span>
</div>

</body>
</html>

Css:

.question-line-row{
  display: flex;
  align-items: center
}
.true-and-false-line{
  border-bottom: 2px solid red;
  flex: 1;
}
span{
  margin: 5px;
}
HTML, CSS,
Похожие вопросы
Яндекс.Метрика