CSS плавает на одной и той же переменной - PullRequest
Новая
       28

CSS плавает на одной и той же переменной

1 голос
/ 13 июля 2011

Я хочу иметь горизонтальные списки, которые могут работать как можно шире, но внутри контейнера фиксированной ширины.Я использую jQuery, чтобы разрешить прокрутку по действительно широкому списку и переполнение: автоматически для пользователей без javascript.

У меня есть следующий код: 

<div class="list"> 
    <ul> 
        <li class="feed"> 
            <section> 
                <h1><span class="name">Title</span></h1> 
                <div class="scroll_left"><a class="ir" href="#">Scroll Back</a></div> 
                <div class="article_list"> 
                    <ul class="article_list"> 
                        <li> 
                            <a href="article.php"> 
                                <div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div> 
                                <h2>Title of article</h2> 
                            </a> 
                        </li> 
                        <li> 
                            <a href="article.php"> 
                                <div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div> 
                                <h2>Title of article</h2> 
                            </a> 
                        </li> 
                        <li> 
                            <a href="article.php"> 
                                <div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div> 
                                <h2>Title of article</h2> 
                            </a> 
                        </li>
                        <!-- variable number of li's, from 10s to 100s -->
                    </ul>
                </div>
            </section>
        </li>
        <!-- More of these lists -->
    </ul>
</div>

Я простодать подмножество моих css, которые я считаю уместными: 

.feed .article_list {
    position: relative;
    overflow: auto;
    float: left;
    width: 900px;
}

.feed .article_list ul {
    position: relative;
    width: 10000px; /** I want this to be wide, but not allow scrolling past the end*/
    margin: 0;
    background-color: #ffffff;
}

.feed .article_list li {
    display: block;
    width: 130px;
    height: 150px;
    position: relative;
    float: left;
    border-right: 2px solid #b5e8f4;
    border-left: 2px solid #b5e8f4;
    margin: 0 5px 0 0;
}

Мой javascript: 

$(document).ready(function() {
    $('div.article_list').css({
        'overflow' : 'hidden'
    });

    $('.scroll_left a').click(function() {
        toScroll = $(this).parent().next();
        toScroll.animate({scrollLeft: "-=135"});
        return false;
    });

    $('.scroll_right a').click(function() {
        toScroll = $(this).parent().prev();
        toScroll.animate({scrollLeft: "+=135"});
        return false;
    });

});

Так что, как бы то ни было, я должен либо сделать внутренний ul очень широким,так что пользователи могут прокручивать далеко за пределы элементов списка, или я могу ограничить его, но если я добавлю слишком много элементов (динамически, поэтому у меня нет большого контроля), то макет нарушается.

Могу ли якаким-то образом заставить прокручиваемую область быть такой же широкой, как ее плавающее содержимое?Или это единственное решение, чтобы установить ширину в JavaScript (не идеально, но я могу это сделать)?

1 Ответ

3 голосов
/ 13 июля 2011

Это float: left на .feed .article_list, который вам действительно не нужен, но я удалил его из всех, что мог.

Я бы перешел на встроенную настройку вместо плавающего: 

.feed .article_list {
    position: relative;
    overflow: auto;
    width: 100%; /* specify what ever width you want. I think 100% is proper. */
}

.feed .article_list ul {
    position: relative;
    overflow-x: scroll;
    margin: 0;
    background-color: #ffffff;
    white-space: nowrap;
}

Делая overflow-x: scroll, вы получаете постоянную полосу прокрутки (необязательно, ее можно удалить, если вы предпочитаете). white-space: nowrap будет держать детей на одной строке (вместо плавающих). 

.feed .article_list li {
    display: inline-block;
    // etc. etc. etc. ...

на дочерних элементах display: inline-block; позволит вам указать высоту / ширину, как элемент блока, и в то же время сохранить их встроенными.

JsFiddle: - http://jsfiddle.net/GBtCb/

ОБНОВЛЕНИЕ: -

Чтобы сделать его совместимым с различными браузерами, внесите следующие изменения: удалить overflow: auto из .feed .article_list и добавьте: 

.feed
{
    overflow: hidden;
}
.article_list
{
    overflow: auto;

от quirksmode.com:

...