Question

我有<hr />元素的以下CSS：

.question-line-row{
    display: flex;
    align-items: flex-end;
    margin: 0 0 25pt;
}
.true-and-false-line{
    border: dashed #333;
    border-width: 0 0 1pt;
    flex: 1 0 0;
}
.justify-trueandfalse{
    border: solid #333;
    border-width: 0 0 1pt;
    margin-top: 15pt;
}

这是HTML：

<div class="question-line-row">
    <span style="text-align: justify" ng-style="{'font-size' : statementSize}">
            {{statement}}
    </span>
    <hr class="true-and-false-line" />
    <span style="text-align: justify" ng-style="{'font-size' : statementSize}">(&emsp;&emsp;&emsp;)</span>
</div>
<hr class="justify-trueandfalse" ng-show="verify" />

然而，这是输出中的内容：

如何让虚线<hr />线与两个周围的<span></span>处于同一水平？

Answer 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;
}

样式<hr />元素适合两个跨度

1 个答案: