在 HTML/CSS 中制作垂直分隔线

Question

我需要实现一条垂直线，如下图所示。提前致谢

.root_class {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 75%;

  margin: 0 auto;

  border: thin solid #ccc;

}

.text {

  font-size: 3rem;

  margin: 0;

  margin-right: 10rem;

}

.percentile-card {

  transition: 0.3s;

  margin: 1rem;

  padding: 5px;

}

.percentile-card p {

  margin: 0;

}

.percentile-card p:first-child {

  color: #bbb;

}

<div class="root_class rhs-background">

        <p class="text">Where Do i Stand Overall ?</p>

        <hr width="1" size="500">

        <div class="percentile-card text-center">

          <h4>You did better Than</h4>

          <i class="fa fa-users pull-left" style="margin-left: 40px;" aria-hidden="true"></i>

          <h5><b>60%</b></h5>

        </div>

      </div>

Answer 1

<hr&nbsp;style="width:100px;&nbsp;transform:rotate(90deg);">

Answer 2

<style>.vl {  border-left: 6px solid green;  height: 500px;  position: absolute;  left: 50%;  margin-left: -3px;  top: 0;}</style><h2>Vertical Line</h2><div class="vl"></div>我的代码；.root_class {  display: flex;  height : 100px;  justify-content: center;  align-items: center;  width: 75%;  margin: 0 auto;  border: thin solid #ccc;}.text {  font-size: 22px;  margin-right : 25px;}.percentile-card {  transition: 0.3s;  margin: 1rem;  padding: 5px;}.vl {  border-left: 6px solid green;  height: 100px;  left: 50%;  margin-left: -3px;  top: 0;}.percentile-card p:first-child {  color: #bbb;}.rate{margin-left : 60px;}.better{    margin-top : 50px;}<div class="root_class">        <p class="text">Where Do i Stand Overall ?</p>          <div class="vl"></div>          <div class="percentile-card text-center">              <h4 class="better">You did better Than</h4>                <h5 class="rate"><b>60%</b></h5>          </div>    </div>

Answer 3

您可以通过两种方式简单地做到这一点：在 hr 中添加 margin 0，就像在 css 中一样 add hr { margin: 0;&nbsp;}或者，您可以在内容定位后尝试如下代码（更灵活）.root_class {&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: stretch;&nbsp; width: 75%;&nbsp; margin: 0 auto;&nbsp; border: thin solid #ccc;&nbsp; height: 400px;&nbsp; background: linear-gradient(to right, #fff 75%, #00a);}.text {&nbsp; font-size: 3rem;&nbsp; margin: 0;&nbsp; padding-right: 5rem;&nbsp; padding-left: 1rem;&nbsp; display: flex;&nbsp; align-items: center;&nbsp; position: relative;}.text:after {&nbsp; content: '';&nbsp; position: absolute;&nbsp; right: 0;&nbsp; height: 100%;&nbsp; width: 1px;&nbsp; background-color: black;}hr{&nbsp; margin: 0;}.percentile-card {&nbsp; transition: 0.3s;&nbsp; padding: 5px;&nbsp; margin: 1rem;}.percentile-card p {&nbsp; margin: 0;}.percentile-card p:first-child {&nbsp; color: #bbb;}<div class="root_class rhs-background">&nbsp; <p class="text">Where Do i Stand Overall ?</p>&nbsp; <div class="percentile-card text-center">&nbsp; &nbsp; <h4>You did better Than</h4>&nbsp; &nbsp; <i class="fa fa-users pull-left" style="margin-left: 40px;" aria-hidden="true"></i>&nbsp; &nbsp; <h5><b>60%</b></h5>&nbsp; </div></div>

Answer 4

您可以将 Margin:0 添加到行中：.root_class {&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; width: 75%;&nbsp; margin: 0 auto;&nbsp; border: thin solid #ccc;}.text {&nbsp; font-size: 3rem;&nbsp; margin: 0;&nbsp; margin-right: 10rem;}.percentile-card {&nbsp; transition: 0.3s;&nbsp; margin: 1rem;&nbsp; padding: 5px;}.percentile-card p {&nbsp; margin: 0;}.VerticalLine {&nbsp; margin: 0;&nbsp; border: 0;&nbsp; width: 15px;&nbsp; background: teal;}.percentile-card p:first-child {&nbsp; color: #bbb;}<div class="root_class rhs-background">&nbsp; <p class="text">Where Do i Stand Overall ?</p>&nbsp; <hr class="VerticalLine" width="5px" size="500">&nbsp; <div class="percentile-card text-center">&nbsp; &nbsp; <h4>You did better Than</h4>&nbsp; &nbsp; <i class="fa fa-users pull-left" style="margin-left: 40px;" aria-hidden="true"></i>&nbsp; &nbsp; <h5><b>60%</b></h5>&nbsp; </div></div>