我需要實現一條垂直線，如下圖所示。提前致謝.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>
4 回答
函數式編程
TA貢獻1807條經驗 獲得超9個贊
<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>
Helenr
TA貢獻1780條經驗 獲得超4個贊
您可以通過兩種方式簡單地做到這一點：
在 hr 中添加 margin 0，就像在 css 中一樣 add hr { margin: 0; }
或者，您可以在內容定位后嘗試如下代碼（更靈活）
.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>
湖上湖
TA貢獻2003條經驗 獲得超2個贊
您可以將 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>
- 4 回答
- 0 關注
- 319 瀏覽
添加回答
舉報
0/150
提交
取消