CODEWITHSUNDEEP
htmlcsslistalignmentborder
Sammi
Sammi

Reputation: 261

How to align div inside order list and about <ul> border style

I would like to ask how can I align 2 div float to left and right inside a <li> and I am trying to use border-left attribute to style the border like the desired effect as shown in the picture. But I have no idea why the bullet points are not aligning in the correct way as what I expected?

JSFiddle

enter image description here

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

Upvotes: 0

Views: 273

Answers (2)

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

Try this code

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

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

Making the elements float collapses the height of the parent element. you have to clear the float to make parent retain its height..

i have added clearfix class to div

enter image description here

Hope this helps..

Upvotes: 0

Super User
Super User

Reputation: 9642

You can set this using :before. check snippet below

*,*: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>

Upvotes: 1

Related Questions