Siddharth Bhatia Siddharth Bhatia - 3 months ago 14
CSS Question

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

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>

Answer

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>

Comments