时间戳

首页 > 解决方案 > 在 HTML/CSS 中创建垂直分隔线

html - 在 HTML/CSS 中创建垂直分隔线

问题描述

我是 HTML/CSS 的初学者，我浏览了许多 StackOverflow 链接，但没有一个有效。所以我需要实现一条垂直线，如下图所示。提前致谢

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

图片

标签： htmlcss

解决方案

来自 W3Schools 的代码

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

推荐阅读