时间戳

首页 > 解决方案 > 在图标之间绘制垂直线

html - 在图标之间绘制垂直线

问题描述

你好，人们是前端 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>

标签： htmlcss

解决方案

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>

推荐阅读