Question

我正在尝试制作一个简单的导航栏。我在导航栏中有两个UL列表。我想选择进入下一行的li。我想使用jQuery和CSS。

我添加了jsFiddle。请将可拖动拖动到右侧以使导航栏压缩。

<ul class="header">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Me</a></li>
    <li><a href="#">Search</a></li>
    <li><a href="#">Facebook Link</a></li>
    <li><a href="#">Twitter Handle</a></li>
    <li><a href="#">Search on Wikipedia</a></li>
    <li><a href="#">Go to Quora.com</a></li>
</ul>

http://jsfiddle.net/wrump1ps/

Answer 1

我不确定你在问什么，但是看一下问题标题，如何知道li's在ul内的位置，使用jQuery：

$('li', 'ul').index(); // Returns the position of the li
$('li', 'ul').eq(0); // Returns the first li element (with index 0)

Answer 2

如果您只想将单个列表拆分为特定<li>元素的两行，则可以浮动它们，然后使用nth-child和clear:both;

http://jsfiddle.net/wrump1ps/1/

.header {
    list-style-type: none;
}
li {
    display: inline;
    float: left;
}
ul.header li:nth-child(4) {
    clear: both;
}

如何使用jquery和css </ul> </li>在<ul>中找到<li>的位置

2 个答案: