li elements won't go on one line even with correct container width

Question

I'm trying to build a slider, but I'm trying to make all the li elements on one line. So far I have this fiddle to show what I'm doing:

http://jsfiddle.net/wgbs1zpr/

My HTML:

<div class="carousel">
    <ul style="width: 654px;" class="slides">
        <li class="slide">
            <div class="img-wrapper">
                <img src="assets/img/agouti-teeth.png" alt="Agouti Teeth">
            </div>
            <div class="caption">Agouti Teeth</div>
        </li>
        <li class="slide">
            <div class="img-wrapper">
                <img src="assets/img/chipmunk-tail.png" alt="Chipmunk Tail">
            </div>
            <div class="caption">Chipmunk Tail</div>
        </li>
        <li class="slide">
            <div class="img-wrapper">
                <img src="assets/img/birds-nest.png" alt="Bird's Nest">
            </div>
            <div class="caption">Bird's Nest</div>
        </li>
        <li class="slide">
            <div class="img-wrapper">
                <img src="assets/img/agouti-teeth.png" alt="Agouti Teeth">
            </div>
            <div class="caption">Agouti Teeth</div>
        </li>
        <li class="slide">
            <div class="img-wrapper">
                <img src="assets/img/chipmunk-tail.png" alt="Chipmunk Tail">
            </div>
            <div class="caption">Chipmunk Tail</div>
        </li>
        <li class="slide">
            <div class="img-wrapper">
                <img src="assets/img/birds-nest.png" alt="Bird's Nest">
            </div>
            <div class="caption">Bird's Nest</div>
        </li>
    </ul>
</div>

My CSS:

.carousel {
    position: relative;
    overflow: hidden;
}
.carousel .slides {
    list-style: none;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
.carousel .slides .slide {
    display: inline-block;
    background-color: #F0F0F0;
    margin: 0 2px;
    width: 105px;
}
.carousel .slides .slide .caption {
    background-color: #D0D0D0;
    text-align: center;
}

Each slide is 105 pixels in width with a 2 pixel margin on the left and right side of it. So the math I did was 105 x 6 (6 slides). This gave me 630 pixels. With the slide margins, it has a total of 4 pixels for the right and left together. So I did 4 x 6 which equals 24. Then added them together. 630 + 24 = 654 pixels. I thought my programming was off, but it's the same either way. But for some odd reason it will only go on one line if the width is 671 pixels (17 greater). I tried a width of 110 pixels for each slide, but then the container (following the same math) had to have 20 extra pixels. So it changes over time so I can't just add 17 pixels randomly for my equation.

I'm not sure what's going on. Thanks for any help!

score 1 · Accepted Answer · edited May 23 '17 at 11:44

1

display:inline-block usually adds around 4px (based on font size of parent) of extra space between elements

To fix you could:

Use float:left to override display:inline-block or you will need to remove the extra spacing that display:inline-block adds via the techniques here (How to remove the space between inline-block elements?)

    .carousel .slides .slide {
        float:left;
         ..
     }

or for display:inline-block you need to make sure there's no white space between your elements or adjust for the extra 4px spacing(based on parent font) via CSS

    <ul><li class="slide">
     ...
    </li><li class="slide">
     ...

edited May 23 '17 at 11:44

Community

1
1

answered Sep 08 '15 at 23:59

sjm

5,378
1
26
37

I can't edit the
tags since I'm using Vue templating and it's always going to appear on a separate line since it's in a loop. But thanks! The floating did the trick. Just wish I could use inline-block so I can center them still..

HaleyBuggs

Sep 09 '15 at 00:04

You could also just accomodate the extra 4px* inline-block provides and remove your margin property – sjm Sep 09 '15 at 00:06

The margin doesn't show then. They go right up against each other if I remove it. That's why I could never see the inline-block pixels that were being added. – HaleyBuggs Sep 09 '15 at 00:07

score 0 · Answer 2 · answered Sep 09 '15 at 00:04

0

Adding

float: left;

to

.carousel .slides .slide

{
}

will do the trick

((Would've just made a comment but can't due to rep))

answered Sep 09 '15 at 00:04

user3471881

2,614
3
18
34

li elements won't go on one line even with correct container width

2 Answers2