title: How to right and left align every alternate list item in html and css along with the bullets
body: <p>I want to right align alternate list elements and keep the other left making it a ZIG-ZAG list
  Something like..
  Item1
                                                                      Item2
  Item3 
                                                                      Item4</p>
  
  <p>I was able to achieve this but without the bullets the bullets of right were still in the left so how do i do that with the bullets......</p>
  
  <pre><code>ul{
  list-style-type: none;
  padding-left: 0;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>ul li {
      margin: 25px 0;
      padding-left: 45px;
  }
  ul li.odd {
      float:right;
  }
      ul li.even {
          position:relative;
      }
  
  
  
   &lt;ul&gt;
     &lt;li class="odd"&gt;
        Item1  
      &lt;/li&gt;
  
       &lt;li class="even"&gt;
          Item2
      &lt;/li&gt;
  </code></pre>