在 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 style="width:100px; 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

您可以通过两种方式简单地做到这一点：

1. 在 hr 中添加 margin 0，就像在 css 中一样 add hr { margin: 0; }

2. 或者，您可以在内容定位后尝试如下代码（更灵活）

.root_class {

  display: flex;

  justify-content: center;

  align-items: stretch;

  width: 75%;

  margin: 0 auto;

  border: thin solid #ccc;

  height: 400px;

  background: linear-gradient(to right, #fff 75%, #00a);

}

.text {

  font-size: 3rem;

  margin: 0;

  padding-right: 5rem;

  padding-left: 1rem;

  display: flex;

  align-items: center;

  position: relative;

}

.text:after {

  content: '';

  position: absolute;

  right: 0;

  height: 100%;

  width: 1px;

  background-color: black;

}

hr{

  margin: 0;

}

.percentile-card {

  transition: 0.3s;

  padding: 5px;

  margin: 1rem;

}

.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>

  <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 4

您可以将 Margin:0 添加到行中：

.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;

}

.VerticalLine {

  margin: 0;

  border: 0;

  width: 15px;

  background: teal;

}

.percentile-card p:first-child {

  color: #bbb;

}

<div class="root_class rhs-background">

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

  <hr class="VerticalLine" width="5px" 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>