如何在列表内部对齐div和关于<ul>边框样式

Question

我想问一下如何在<li>内左右对齐2 div div并尝试使用border-left属性来设置边框样式，如所示效果所示图片。但是我不知道为什么子弹点没有按照我的预期正确对齐？

JSFiddle

#list1 li{
   width:100%;
   list-item:circle;
   border-left:1px solid #666;
}

Answer 1

您可以使用:before进行设置。检查下面的代码段

*,*:before,*:after {
  box-sizing: border-box;
}
.left{
  width:50%;
  text-align:left;
  float:left;
}

.right{
  width:50%;
  text-align:right;
  float:right;
}
#list1 {
  list-style: none;
}
#list1 li{
  width:100%;
  list-item:circle;
  border-left:1px solid #666;
  padding-left: 20px;
  position: relative;
  float: left;
}
#list1 li:before{
  content:'';
  position: absolute;
  left: -6px;
  top: 5px;
  width: 11px;
  height: 11px;
  background: #000;
  border-radius:100%;
}

<div class="statusList">
  <ul id="list1">
    <li>
      AAAAA<br>
      <div style="width:100%; clear:both;">
        <div class="left">Time</div>
        <div class="right">Date</div>
      </div>
    </li>
    <li>
      BBBBB<br>
      <div style="width:100%; clear:both;">
        <div class="left">Time</div>
        <div class="right">Date</div>
      </div>
    </li>
    <li>
      CCCCC<br>
      <div style="width:100%; clear:both;">
        <div class="left">Time</div>
      <div class="right">Date</div>  
      </div>
      
    </li>
  </ul>
</div>

Answer 2

试试此代码

＆＃13;

＆＃13;

  .left{
      width:50%;
      text-align:left;
      float:left;
    }
    .clearfix::after
    {
      content:"";
      display: table;
      width:100%;
     clear:both;
    }
    .right{
      width:50%;
      text-align:right;
      float:right;
    }
    
    #list1 li{
      width:100%;
      list-item:circle;
      position: relative;
    }
    #list1 li::before
    {
      content:"";
      position: absolute;
      width:1px;
      height:100%;
      top:0;
      bottom:0;
      margin:auto;
      border-right:1px solid #000;
      left:-15px;
    }

＆＃13;

  

      <div class="statusList">
      <ul id="list1">
        <li>
          AAAAA<br>
          <div style="width:100%;" class="clearfix">
            <div class="left">Time</div>
            <div class="right">Date</div>
          </div>
        </li>
        <li>
          BBBBB<br>
          <div style="100%" class="clearfix">
            <div class="left">Time</div>
            <div class="right">Date</div>
          </div>
        </li>
        <li>
          CCCCC<br>
          <div style="100%" class="clearfix">
            <div class="left">Time</div>
          <div class="right">Date</div>  
          </div>
          
        </li>
      </ul>
    </div>


      

＆＃13;

＆＃13;

＆＃13;

使元素浮动会折叠父元素的高度。你必须清除浮动以使父母保持其高度..

我已将clearfix类添加到div

希望这会有所帮助..