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