Создание неупорядоченного списка ведет себя так же, как на веб-сайте Apple

0

Перейдите на страницу http://store.apple.com/us/buy-mac/mac-pro?product=MD878LL/A&step=config, загрузите кучу элементов и посмотрите расширенный список аддонов на боковой панели. Этот список является неупорядоченным списком с набором элементов li. Чтобы создать второй столбец надстроек, они заставляют их иметь крайний левый достаточно большой, чтобы переместить их, а затем назначить верхний край: -170 в первом элементе строки, чтобы заставить его перейти в начало. Происходят две разные вещи, которые я не могу воспроизвести.

  • Левая левая сторона, похоже, не имеет значения, когда назначается отрицательный край-верх, первый столбец li не меняет позицию, а вторая строка не учитывает их в пути
  • Все элементы под данным li следуют примеру выше, поэтому, когда они подталкивают вторую строку li, все те, что ниже, также поднимаются без каких-либо дальнейших модификаций

Как я могу это сделать? Я просмотрел их CSS и не могу понять его. Если я пишу подобный код, который я могу получить это далеко, но когда я пытаюсь вытащить его, похоже, это

Мой HTML генерируется в шаблоне, а затем модифицируется javascript, поэтому вот что выглядит на первом снимке, когда все сказано и сделано, и это CSS

.optli{
    width:300px;
    position:relative;
}
.optli li{
    line-height:20px;
    min-height:20px;
}
.optli_right{
    margin-left:320px; 
}
.optli_left{
}
.optli_container{
    width:640px;
    height:auto;
}
.optli_container_hidden{
    overflow:hidden;
    background-color:transparent;
}
.optli_container_open{
    overflow:visible;
    background-color:#AAAAAA;
}
  • 0
    Покажите нам свой HTML / CSS
  • 0
    Я добавил HTML и CSS.
Показать ещё 2 комментария
Теги:
html-lists

2 ответа

2
Лучший ответ

EDIT: Фактическое решение (см. Комментарии)

Проблема заключалась в том, что OP размещал содержимое внутри каждого li и не очищал их. Применяя overflow: hidden для каждого li проблема была решена.


Поскольку вы не опубликовали функциональный пример своей реализации (с JavaScript), я не могу сказать вам, почему ваша реализация не работает, однако, вероятно, это связано с спецификой CSS и переписанием полей.

HTML и CSS на самом деле довольно просты, вы должны реализовать его так:

Рабочий пример (http://jsfiddle.net/georeith/7kDyQ/5/)

HTML:

<ul id="products">
    <li>product 1</li>
    <li>product 2</li>
    <li>product 3</li>
    <li class="column-2 up">product 4</li>
    <li class="column-2">product 5</li>
    <li class="column-2">product 6</li>
    <a href="#" id="show-more">Show more &raquo;</a>
</ul>

CSS:

#products {
    width: 100px; /* Width of one column */
    border: 1px solid;
    list-style-type: none;
    margin: 0;
    padding: 5px;
    overflow: hidden; /* Hide offset list items */
    float: right;
}

#products.open {
    width: 200px; /* Width of however many columns you need to show */
}

#products li {
    width: 100px; /* Here you specify the width of a column */
    margin: 0;
    padding: 0 5px;
    height: 20px; /* We use equal height here, you will want to change this and calculate the height of each column with JavaScript */
}

#products li.column-2.up {
    margin-top: -60px; /* You should do this with JavaScript in production as you can't guarantee the height depending on your content length */
}

#products li.column-2 {
    margin-left: 100px; /* (Column width X (Column number - 1)); */
}

#show-more {
    display: block;
    padding: 5px;
    text-align: right;
}

JS (с использованием jQuery):

var $products = $("#products");
var open = $products.hasClass("open");
$("#show-more").on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();
    if (open) {
        $products.removeClass("open");
        this.innerHTML = "Show more &raquo;"
    } else {
        $products.addClass("open");
        this.innerHTML = "Close &otimes;";
    }
    open = !open;
});

Модифицируйте, чтобы удовлетворить ваши потребности.

  • 0
    Проблема заключалась в содержании моих тегов li. Как только я заменяю все это простым текстом, он работает точно так, как я ожидаю.
  • 1
    @ Да, я вижу, что вы плавали внутри них. Вы пытались поставить overflow: hidden на каждом li ?
Показать ещё 1 комментарий
1

это только первый <li> второго столбца с отрицательным краем:

вот моя работа DEMO

  • 0
    Я делал это без рабочих результатов. Если это работает в примере, который вы привели, должно быть какое-то существующее прикручивание CSS с моим дисплеем. Спасибо за рабочую демонстрацию, я должен быть в состоянии отработать это.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню