Responsive horizontal unordered list Hide the first bullet point of each item

The problem

You have a horizontal list of n number of items that needs to have bullet points between each item. The width of the list needs to be scalable and the first item of the next row should not have a bullet point preceding it.

The solution

No need for fancy media query(s). Have a wrapper that hides overflow and bump your list to the left.

.wrapper { overflow:hidden; } ul.responsive-list { margin-left: -40px; overflow: hidden; } .responsive-list li { float:left; width:80px; padding-left:40px; list-style: disc; }

Demo

   

      
1:00 PM
      
2:00 PM
      
3:00 PM
      
4:00 PM
      
5:00 PM
      
6:00 PM
      
7:00 PM
      
8:00 PM
      
9:00 PM
      
10:00 PM
   


.wrapper {
   overflow:hidden;
}
ul.responsive-list {
   margin-left: -40px;
   overflow: hidden; /* this is to clear the floated li's */
}
.responsive-list li {
   float:left;
   width:80px;
   padding-left:40px;
   list-style: disc;
}

• 1:00 PM
• 2:00 PM
• 3:00 PM
• 4:00 PM
• 5:00 PM
• 6:00 PM
• 7:00 PM
• 8:00 PM
• 9:00 PM
• 10:00 PM