i want right align alternate list elements , keep other left making zig-zag list like.. item1 item2 item3 item4
i able achieve without bullets bullets of right still in left how do bullets......
ul{ list-style-type: none; padding-left: 0; }
ul li { margin: 25px 0; padding-left: 45px; } ul li.odd { float:right; } ul li.even { position:relative; } <ul> <li class="odd"> item1 </li> <li class="even"> item2 </li>
you need create custom bullets css , use nth-child selector style them want shown in below snippet.
.styled-list { list-style: none; max-width: 200px; padding: 0; margin: 0; } .styled-list li { position: relative; padding-left: 10px; float: left; } .styled-list li:before { border-radius: 100%; position: absolute; background: #000; content: ''; height: 5px; width: 5px; top: 6px; left: 0; } .styled-list li:nth-child(even) { padding-right: 10px; text-align: right; padding-left: 0; float: right; } .styled-list li:nth-child(even):before { left: auto; right: 0; }<ul class="styled-list"> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> <li>list item 7</li> <li>list item 8</li> </ul>or can remove float if wants this:
.styled-list { list-style: none; max-width: 200px; padding: 0; margin: 0; } .styled-list li { position: relative; padding-left: 10px; } .styled-list li:before { border-radius: 100%; position: absolute; background: #000; content: ''; height: 5px; width: 5px; top: 6px; left: 0; } .styled-list li:nth-child(even) { padding-right: 10px; text-align: right; padding-left: 0; } .styled-list li:nth-child(even):before { left: auto; right: 0; }<ul class="styled-list"> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> <li>list item 7</li> <li>list item 8</li> </ul>
Comments
Post a Comment