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

Question

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

Navigation

#1 by (3 votes)

3

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

Listofimages"breaking"

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.

javascript html jquery css

asked by anonymous 10.05.2014 / 02:01

1 answer

Pass object list between files Problem in displaying JCalendar-1.4

score 3 · 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 for CSS that I really like, and I'll explain it here.

Because your images (in this case the <li> ) are inline-blocks , they behave like text in many ways. If you apply white-space: nowrap to one of the containers ( #fotos or <ul> ), you force text to not 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;
}

link

If you want to create a feature to show the next images here is a suggestion below. (note that I made an adjustment to the height of #fotos to 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);
}

link