CODEWITHSUNDEEP
htmlcssalignment
Siddharth Bhatia
Siddharth Bhatia

Reputation: 45

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>

Upvotes: 1

Views: 3709

Answers (1)

Mohammad Usman
Mohammad Usman

Reputation: 39322

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>

Upvotes: 2

Related Questions