Остановить перенос изображений, когда ширина div мала - PullRequest
Новая
       3

Остановить перенос изображений, когда ширина div мала

8 голосов
/ 18 марта 2010

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

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;
}

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

Ответы [ 2 ]

6 голосов
/ 19 марта 2010

Вот рабочая 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>

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

3 голосов
/ 18 марта 2010

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

<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 хочет прокомментировать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...