OneMoreQuestion OneMoreQuestion - 2 months ago 8x
CSS Question

Easy way to fix spacing in horizontal slider

As you can see in this Fiddle, there is an awkward spacing between a slide element and the right arrow element, this spacing actually changes as the browser resizes.

How do I get rid of this spacing and make everything fit together tightly?

Note that I do not want to make the width of the wrapper (whole slider) fixed (I want it to be relative) because I want to see the entire slider even when browser gets smaller. I do, however, want each slide element to have a fixed width.

I have tried adding the following in CSS but this doesn't help.

.next-slide, .prev-slide {
padding-right: -1px;
margin-right: -1px;


Hope I didn't misinterpret your expectations, but I believed you were referring to the way that, if you shrink and grow your browser, you will see the final slide appear and disappear based on whether it completely fits in the visible area, and some amount of gray background space is always visible. For that, I did the following:

  • Swapped float: left on the slides for display: inline-block

  • To then counter the extra whitespace appearing between them, add font-size: 0 to the .tab-container (font size is set on each li so this only removes unwanted whitespace)

  • To prevent line breaks, add white-space: nowrap to .tab-container. (In developer tools, you can see non-fitting elements were moving to the next line)