How to make a horizontal list of images that does not break?

Question

I want to make a list of images horizontally, but they’re falling, look:

My CSS:

#fotos{
    margin-top:30px;
    width:650px;
    overflow-x: hidden;
    height:110px;
    border:1px solid #CCC;
}
#fotos ul li{

    margin-right:4px;
    cursor: pointer;
    width:100px;
    height:100px;
    background:#CCC;
    border:1px solid #555;
    display: inline-block;
}

My HTML:

<div id="fotos">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

I also wanted to be able to click on the corners and show the next images.

Answer 1

There is more than one way to solve this, and it is usually done by Javascript. But there’s a simple way to solve by CSS that I really like, and I’ll explain here.

As their images (in this case the <li>) sane inline-Blocks, they behave as text in various aspects. If you apply white-space: nowrap in one of the containers (#fotos or the <ul>), you force the text not to break lines, getting the result you want:

#fotos{
    margin-top:30px;
    width:650px;
    overflow-x: hidden;
    height:110px;
    border:1px solid #CCC;
    white-space: nowrap;
}

http://jsfiddle.net/FmMry/

If you want to create a feature to show the next images here is a hint below. (note that I made an adjustment to the height of the #fotos for height:135px;

Add javascript/jQuery:

var scrollAtual = 0;
$('#tras, #frente').click(fazerScroll);

function fazerScroll(e) {
    var direcao = e.target.id == 'frente' ? 1 : -1;
    $('#fotos').animate({
        scrollLeft: scrollAtual += 200 * direcao
    }, 1000);
}

http://jsfiddle.net/KLYyp/