编辑：实际解决方案（见评论）

Question

转到http://store.apple.com/us/buy-mac/mac-pro?product=MD878LL/A&step=config，加载一堆项目，然后查看侧栏上扩展的插件列表。该列表是一个带有一堆li元素的无序列表。为了创建第二列附加组件，他们使这些li有一个边距 - 大到足以移动它们然后在行的第一个元素上指定一个margin-top：-170以使其到达顶部。发生了两件我无法复制的不同事情。

当分配负边距顶部时，边距左边似乎不重要，li的第一列不改变位置而第二行不考虑它们
给定li下的所有元素都跟上面的那个元素一致，所以当他们推动第二行li时，所有下面的元素也会上升而不做任何进一步修改

我怎样才能实现这一目标？我已经回顾了他们的CSS并且无法理解它。如果我写相似的代码，我可以得到this远，但当我尝试将其提起时，它看起来像this

我的HTML是在模板中生成的，然后通过javascript进行修改，所以here is what it looks like in the first picture完成所有操作后这就是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;
}

Answer 1

编辑：实际解决方案（见评论）

问题是因为OP已在每个li内部浮动内容而未清除它们。通过将overflow: hidden应用于每个li，问题就解决了。

因为您还没有发布实现的功能示例（使用JavaScript），我无法告诉您为什么您的实现不起作用，但这可能是由于CSS specificity并覆盖了边距。 / p>

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's 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;
});

修改以满足您的需求。

Answer 2

它只是第二列的第一个<li>，它有一个负边距 - 顶部：

这是我的工作 DEMO

制作无序列表的行为类似于Apple网站上的列表

2 个答案:

编辑：实际解决方案（见评论）