Вопросы Теги

Мешайте изображениям перенестись, когда ширина отделения будет к маленькому

У меня есть отделение, которое содержит ул. и в каждом литии существует изображение. Я пустил в ход изображения, оставленные заставить их выстраиваться в линию в прямой линии однако, после того как она достигает конца отделения, она переносится. Я хотел бы, чтобы изображения продвинулись направо, скрытый, так, чтобы я смог создать кольцевую галерею. Мой код ниже.

HTML

<div id="container">
    <div class="lfbtn"></div>
    <ul id="image_container">
        <li class="the_image">
            <img src="" />
        </li>
    </ul>
    <div class="rtbtn"></div>
</div>

CSS

#container {
    width: 900px;
    height: 150px;
    margin: 10px auto;
}

#image_container {
    position: relative;
    left: 50px;
    list-style-type: none;
    width: 700px;
    height: 110px;
    overflow: hidden;

}

#image_container li {
    display: inline-block;
    padding: 7px 5px 7px 5px;
    float: left; 
}

.lfbtn {
    background-image: url(../../img/left.gif);
    background-repeat: no-repeat;
    margin: 10px;
    position: relative;
    float: left;
    top: -12px;
    left: 50px;
    height: 90px;
    width: 25px;
}

.rtbtn {
    background-image: url(../../img/right.gif);
    background-repeat: no-repeat;
    height: 90px;
    width: 25px;
    margin: 10px;
    position: relative;
    top: -101px;
    left: 795px;
}

Заранее спасибо!

8
задан user103219 18 March 2010 в 20:01
поделиться

2 ответа

Обновите свой стиль, чтобы отразить это: 

<div id="container">
    <div class="lfbtn"></div>
    <div style="width: 700px; overflow: hidden;">
        <ul id="image_container" style="width: 1000000px;">
            <li class="the_image">
                <img src="Untitled-1.gif" />
            </li>
        </ul>
    </div>
    <div class="rtbtn"></div>
    <br style="clear: both;" />
</div>

Вам нужно установить ширину для div, который охватывает UL, а затем установить для него переполнение. Установите для вашего UL некоторую дикую ширину, чтобы он никогда не переносился даже с большим количеством LI.

Честно говоря, я не уверен, почему UL не будет обрабатывать это так же, как DIV, даже если UL настроен на отображение блока. Любой гуру CSS не прочь прокомментировать.

3
ответ дан 5 December 2019 в 18:58
поделиться

Вот рабочий SSCCE с минимально необходимыми стилями, чтобы заставить его работать: 

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2472979</title>
        <style>
            #images {
                width: 700px;
                height: 100px;
                overflow: hidden;
                white-space: nowrap;
            }
            #images li {
                list-style-type: none;
                display: inline;
            }
        </style>
    </head>
    <body>
        <div id="images">
            <ul>
                <li><img src="http://sstatic.net/so/img/logo.png" width="250" height="61"></li>
                <li><img src="http://sstatic.net/so/img/logo.png" width="250" height="61"></li>
                <li><img src="http://sstatic.net/so/img/logo.png" width="250" height="61"></li>
            </ul>
        </div>
    </body>
</html>

Видите ли, ключ белое пространство: nowrap; . Если вы хотите создать полноценную карусель, просто замените overflow: hidden; на overflow-x: scroll; и overflow-y: hidden; .

6
ответ дан 5 December 2019 в 18:58
поделиться