转到 http://store.apple.com/us/buy-mac/mac-pro?product=MD878LL/A&step=config ,加载一堆元素并查看侧栏上扩展的插件列表。该列表是一个包含一堆 li 元素的无序列表。为了创建附加组件的第二列,他们让这些 li 有一个足够大的 margin-left 来移动它们,然后在该行的第一个元素上分配一个 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;
}
最佳答案
编辑:实际解决方案(见评论)
问题是因为 OP 在每个 li
中 float 了内容并且没有清除它们。通过对每个 li
应用 overflow: hidden
问题得到解决。
因为您还没有发布实现的功能示例(使用 JavaScript),所以我无法告诉您为什么您的实现不起作用,但这可能是由于 CSS specificity 造成的。并覆盖边距。
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 »</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 »"
} else {
$products.addClass("open");
this.innerHTML = "Close ⊗";
}
open = !open;
});
修改以满足您的需求。
关于html - 使无序列表的行为类似于 Apple 网站上的列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21174807/