Question

是否有任何css方法可以在列表顶部使用某些类来冒泡<li>个元素。我想我过去曾经遇到某种方法，但是不记得如何做到这一点。

请注意我不需要重新排列标记。只需将具有某个类的元素显示为，就像在没有该类的其他元素之上一样。

有人能告诉你是否有办法做到这一点？

Answer 1

使用纯CSS，您可以使用绝对定位将元素移动到列表的顶部，但就标记而言，它实际上不会位于列表的顶部。但是，您可以使用javascript实现您想要做的事情。使用jQuery，您可能希望在这些方面做一些事情：

<强> HTML：

<ul id="myList">
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
    <li class="top">First</li>
    <li>Fifth</li>
</ul>

<强>使用Javascript：

$(document).ready(function () {
    var list = $('#myList');
    list.children('li.top').remove().prependTo(list);
});

工作示例：http://jsfiddle.net/tMWJs/

修改

要使用纯CSS执行此操作，请使用绝对定位。以下是您需要的css示例：

ul#myList {position:relative; margin-top:40px;} ul#myList li {line-height:20px;} li.top {position:absolute; top:-20px;}

如果要移动多个元素，这种方法需要修改以单独定位每个元素，并且可能不适合。

工作示例：http://jsfiddle.net/sp73f/

css方法使列表元素<li>出现在列表顶部的某个类</li>

1 个答案: