0

I am trying to over right the ul li default property to achieve certain structure. Someone suggest the right way of doing this.

I am having 7 list item with margin-bottom of 5px. Used float left to display them in the 2 column. First Li has one line content and the second li (right side) has two line content. So my third li which is in the left side automatically start 5 px margin from the 2nd li. But I want it(3rd list item (li)) to take 5px margin from first li which in the left side. I want all my list item to take only margin-bottom of 5px.

 <div class="lst-container">
      <ul class="bullet-list">
             <li><a href="">Content</a></li>
              <li><a href="">ContentContent Content </a></li>
              <li><a href=""> Content content content</a></li>
              <li><a href="">Content</a></li>
              <li><a href="">Content</a></li>
              <li><a href="">Content content</a></li>
             <li><a href="">Content content</a></li>

         </ul>
      </div>



   [Jsfiddle][1] https://jsfiddle.net/4Lvnut4p/1/
Kavitha Velayutham
  • 663
  • 1
  • 9
  • 27

1 Answers1

1

You can use column-count property. I updated your jsfiddle: https://jsfiddle.net/4Lvnut4p/3/

mwl
  • 1,448
  • 14
  • 18
  • When I increase the content of list3 it display in the 2nd column Updated in fiddle https://jsfiddle.net/4Lvnut4p/5/ – Kavitha Velayutham Aug 17 '15 at 08:09
  • Prevent column break: http://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element/7785711#7785711 – mwl Aug 17 '15 at 14:08