CODEWITHSUNDEEP
htmlcsswidthmargins
HaleyBuggs
HaleyBuggs

Reputation: 915

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

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!

Upvotes: 0

Views: 384

Answers (2)

sjm
sjm

Reputation: 5468

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">
     ...

Upvotes: 1

user3471881
user3471881

Reputation: 2724

Adding 

float: left;

to

.carousel .slides .slide

{
}

will do the trick

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

Upvotes: 0

Related Questions