您好，您是前端Web开发的新手，仍然在学习。我需要在三个图标之间添加两条垂直线，请帮帮我。
到目前为止，这是我所做的：
.photo {
background-image: url(photo.jpg.jpg);
width: 100%;
height: 500px;
background-size: cover;
color: hsla(325, 50%, 50%, 0.6);
}
h1 {
text-align: center;
padding-top: 15%;
}
.p {
text-align: center;
color: #FFCA28;
padding-top: 0.5%;
color: hsla(325, 50%, 50%, 0.6);
}
.Request {
width: 200px;
height: 100px;
border-radius: 25px;
font-size: 25px;
color: #fff;
line-height: 100px;
text-align: center;
background: #d50000;
float: center;
margin-left: 22em;
margin-top: 2em;
}
.q {
float: right;
padding: 2%;
}
.j {
text-align: center;
color: grey;
border-radius: 50%;
width: 100%;
height: 100%;
}
.content-wrap {
display: flex;
justify-content: space-between;
position: relative;
}
.icon1 {
width: 6rem;
height: 6rem;
font-size: 4rem!important;
/* !important is here just to override SO styles*/
color: #777;
border: 2px solid #777777;
border-radius: 50%;
padding: 1rem;
text-align: center;
line-height: 6rem!important;
/* !important is here just to override SO styles*/
}<!DOCTYPE html>
<html>
<head>
<title> JAMES UFONDU</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="q">
Products Community Talk to Sales Request Demo En
</div>
<div class="photo">
<h1> MANAGE YOUR CONDOMINIUM THE BETTER WAY</h1>
<p class="p"> <strong>Use Evercondo to communicate, manage, organize, measure and optimize your day-to-day operations.</strong> </p>
<p class="Request">Request Demo</p>
</div>
<div class="j">
<h2> How does Evercondon Work ? </h2>
<p>Eliminate the chaos in your day-to-day management tasks</p>
</div>
<div class="contentwrap">
<i class="fa fa-car icon1"></i>
<i class="fa fa-star-o icon1"></i>
<i class="fa fa-signal icon1"></i>
</div>
</body>
</html>最佳答案
I added the <hr> tag between the icons
<!DOCTYPE html>
<html>
<head>
<title> JAMES UFONDU</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="q">
Products Community Talk to Sales Request Demo En
</div>
<div class="photo">
<h1> MANAGE YOUR CONDOMINIUM THE BETTER WAY</h1>
<p class="p"> <strong>Use Evercondo to communicate, manage, organize, measure and optimize your day-to-day operations.</strong> </p>
<p class="Request">Request Demo</p>
</div>
<div class="j">
<h2> How does Evercondon Work ? </h2>
<p>Eliminate the chaos in your day-to-day management tasks</p>
</div>
<div class="contentwrap">
<i class="fa fa-car icon1"></i><hr>
<i class="fa fa-star-o icon1"></i> <hr>
<i class="fa fa-signal icon1"></i><hr>
<div>
</body>
关于html - 在图标之间绘制垂直线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50838596/