如何增加<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

喜欢这是一种方式。我想你想要一个垂直这样的行：

＆＃13;

＆＃13;

#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;
}
 

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我已经放了两个课程divider，divider2，更改并播放宽度和高度以及border-left和border-right以获得您的愿望线。

BTW，您可能还想查看bootstrap timeline

Answer 2

您可以在i中添加行高，然后在您添加

下的行下面

hr

标签

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;