How to right and left align every alternate list item in html and css along with the bullets


Tags: html,css,html5,css3,alignment

Problem :

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

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

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>


Solution :

You need to create custom bullets with css for this and then use nth-child selector to style them like you want as 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 you can remove float if you 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>


    CSS Howto..

    How can apply multiple background color to one div

    How to get text within div to be relative to the div's width and height, CSS, HTML

    CSS (Fixed width right, fluid left, left is first in html) How do I keep left div from collapsing?

    How do I tell what are the ids and classes of a rail html.erb component?

    Pesudo Class and Css Role how to apply theme

    Only Javascript code to show a class without onclick

    How do i prevent my CSS affecting external plugins?

    How to modify divs in grid template site?

    How to stop floating right image inside div bleeds over in Google Chrome

    Jquery CSS How To Use Margin: 0 auto

    How to import a CSS file from an external bundle resource

    Scroll to next and previous div using scrollTop, how do I accomplish this?

    How to get rid of hidden space HTML/CSS [closed]

    How do I have the div displayed without having text content?

    How to “mark” a UL/LI nav item as “active” based on click?

    How do i make this form same on all browsers?

    How to change or remove quote symbol in css

    CSS: How to target a specific cell inside a table?

    IE8 only shows css content after event fired

    How to contain a scrollable div element completely within another?

    How to style an input that is a type=“button”?

    How to target an element under an other element?

    How to create that background on my page with css [duplicate]

    Show nested list on click in Joomla (1.7.0)

    How to properly apply CSS style to H elements in ordered list

    How to convert a css only megamenu to jquery based

    how to isolate firefox 17 rendering bug [closed]

    How can I set the CSS class of an element in a Rails view?

    how to overwrite inline styles in print css?

    How to arrange subchild in the horizontal menu