html - 如何在订单列表中对齐 div 和关于 <ul> 边框样式

Question

我想问一下如何在 <li> 中左右对齐 2 个 div float 我正在尝试使用 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>