如何增加标签之间的间隙<i>并在它们之间添加垂直线

Question

我需要在两个<i>标签之间创建间距，并在它们之间建立垂直线。

这是我的代码：

#wrap {
  width: 650px;
  margin: 0 auto;
}
#left_col {
  float: left;
  width: 300px;
}
#right_col {
  float: right;
  width: 300px;
  padding-left: 20px;
}

<div id="wrap">
  <div id="left_col">
    <p>Are you a Developer?</p>
    <i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px; padding-top: 20px;">  
            Register Your Project Online</i> 
    <br><i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;"> 
            Wait for Project Approval </i>
    <i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;"> 
            Raise funding in 90 days </i>
    <i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;"> 
            Provide Regular construction updates </i>
    <i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;"> 
            Complete and Sell Project </i>
    <i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;"> 
            Destribute funds to Investor </i> 
  </div>

如何增加<i>标签之间的缝隙并在每条线的末端添加垂直线？

Answer 1

像这样是一种方式。我认为您想要垂直这样的行：

#wrap {
  width: 650px;
  margin: 0 auto;
}
#left_col {
  float: left;
  width: 300px;
}
#right_col {
  float: right;
  width: 300px;
  padding-left: 20px;
}
.cont i {
  text-align: center;
  margin: 5px;
  padding:5px;
  line-height: 25px;
}
.divider {
  width: 50%;
  height: 50px;
  border-right:solid;
  border-left-color: black;
}
.divider2 {
  width: 50px;
  height: 50px;
  border-left:solid;
  border-left-color: black;
}
 

   <div id="wrap">
      <div id="left_col" class="cont">
        <p>Are you a Developer?</p>
        <i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px; padding-top: 20px;">  
                Register Your Project Online</i> 
         <div class="divider"></div>
        <i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;"> 
                Wait for Project Approval </i>
<div class="divider"></div>
        <i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;"> 
                Raise funding in 90 days </i>
<div class="divider"></div>
        <i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;"> 
                Provide Regular construction updates </i>
<div class="divider"></div>
        <i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;"> 
                Complete and Sell Project </i>
<div class="divider"></div>
        <i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;"> 
                Destribute funds to Investor </i> 
      </div>
</div>

我将两个类divider，divider2，更改和播放的宽度和高度以及border-left和border-right播放以获取您的欲望线。

顺便说一句，您可能还需要检查Bootstrap时间轴

Answer 2

您可以向i添加线路高度，然后在下面添加

hr

标签。

i, cite, em, var, address, dfn {
    line-height: 30px;
}
#wrap {
  width: 650px;
  margin: 0 auto;
}
#left_col {
  float: left;
  width: 300px;
}
#right_col {
  float: right;
  width: 300px;
  padding-left: 20px;
}

<div id="wrap">
  <div id="left_col">
    <p>Are you a Developer?</p>
    <i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px; padding-top: 20px;">  
          Register Your Project Online</i> 
    <i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;"> 
          <hr>
            Wait for Project Approval </i>
    <i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;"> 
            <hr>
            Raise funding in 90 days </i>
    <i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;"> 
            <hr>
            Provide Regular construction updates </i>
    <i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;"> 
            <hr>
            Complete and Sell Project </i>
    <i class="fa fa-facebook" aria-hidden="true" style="padding-left: 10px;"> 
            <hr>
            Destribute funds to Investor </i> 
  </div>