2

我有一堆彼此并排堆叠的无序列表元素。为此，通常应用的样式规则是：

#slide ul,li{
float:left;
list-style-type:none;
}

我需要介绍另一个无序列表的元素，它们的行为方式与ulandli元素通常的行为方式相同；堆叠在一起但没有任何列表样式类型，并实现此目的：

.stack ul,li{
list-style-type:none
}
​

问题是 ul,li 的堆栈类的样式不适用，并且元素堆叠在一起，因为它们在 #slide 的 ul,li 的情况下。

在这个 js fiddle 上检查一下：

http://jsfiddle.net/G7JHK/

我的选择器错了吗？

PS：我已经尝试过使用 class/id 以及两者的各种组合，但结果总是相同的。

4

5 回答 5

5

由于选择器中的逗号，您将 float left 应用于所有 li 元素。尝试这样的事情： 

<ul class="stack">
<li>element 1</li>
<li>element  2</li>
</ul>
<br/>
<ul id="slide">
<li>element 3</li>
<li>element  4</li>
</ul>


#slide li{
 display:inline;   
}

这个 css 将使 div 'slide' 中的所有列表元素连续显示，所有其他列表元素将继续正常显示。它使您不必使用两个不同的类:) ​</p>

于 2013-01-03T17:11:48.270 回答
4

你的 CSS 应该是这样的

ul.stack li{
  display:block;
}
ul#slide li{
  float:left;
}

​</p>

于 2013-01-03T17:08:44.190 回答
3

你的选择器有问题。同一元素的类或 id 永远不会被空格分隔。它们应该没有空格，孩子用空格隔开，但不会在那里使用“，”。所以你可以在你的代码中试试这个

ul.stack li{
display:block;
}
ul#slide li{
float:left;
}

此外，您必须先放置 HTML 标记名称，然后再放置前面的属性。

于 2013-01-03T17:19:30.713 回答
3

我想你想要这样的东西：

ul.stack li{
  display:block;
}
ul#slide li{
  float:left;
}

看看选择器。你想选择一个带有类堆栈（ul.stack）的ul并找到它的子li。

于 2013-01-03T17:08:51.543 回答
1

问题是您选择了作为 slide 的后代的 ul，但是您的 ul 的 id 为 slide，所以它不起作用，因为没有 ul 的容器的 id 为slide。此外，通过放置,li您正在选择页面上的所有列表项。您想要拥有#slide li，它只会选择容器 id 为 的列表项slide。你不需要，#slide ul所以你的最终代码应该是

#slide li {
float:left;
}

http://jsfiddle.net/G7JHK/6/


作为替代方案，您可以使用ul:nth-of-type(2)而不是 id 来节省 html 中的一些空间 http://jsfiddle.net/G7JHK/7/

于 2013-01-03T17:37:26.537 回答