水平列表中的列表

Question

我在试验一个设计。好像我无法让我的CSS正确。我有一个水平列表，每个列表项都有一个列表。嵌套列表似乎没有正常运行。我在这里做错了什么？

http://jsfiddle.net/89sqw/

嵌套列表没有平方列表类型，并且边距都是错误的。

Answer 1

您应用于#tfList li的所有内容对您的嵌套列表项也有效（除非您覆盖）。此外，您不应该有两个具有相同ID的元素，而是使用类。

Answer 2

几个问题：

1）如@bfavaretto所述，您不能拥有多个具有相同ID的元素

2）您没有关闭“P”标签。结束标签有斜杠（</p>）

3）您正在对包含块元素的元素使用display：inline。这是无效 不是很好的做法，可能会给你带来麻烦。改为使用内联块：

#some-item {
  display: inline-block;
  vertical-align: top;
  *display: inline;
  *zoom: 1;
}

编辑：提示 - 您可以使用特殊的“子”选择器来仅选择元素的直接子元素。 http://jsfiddle.net/ryanwheale/F3cqD/

<ul>
  <li>
    Level 1
    <ul>
      <li>Level 2</li>
      <li>Level 2</li>
    </ul>
  </li>
  <li>Level 1</li>
</ul>

这些风格

ul > li {
  color: red;
}
ul > li > ul > li {
  color: green;
}

Answer 3

这个问题很容易被忽略，但它来自于将display元素的#tfList li属性覆盖为display: inline，然后错误地尝试将其重新设置为{{1 }}

列表项的正确显示是：

display: block;

另外，要在列表项上取回间距，请在display: list-item; 元素上设置左边距。

Fiddle