我有以下 CSS 用于 <hr />元素:
.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}">(   )</span>
</div>
<hr class="justify-trueandfalse" ng-show="verify" />
然而，这是输出中的内容:
我怎样才能使虚线<hr />两条周边线要在同一层<span></span>的？
最佳答案
您可以按照这些代码:
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 - 样式 <hr> 元素以适应两个跨度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44009673/