html - 水平列表中的列表

Question

我正在试验一个设计。看来我无法正确使用 CSS。我有一个水平列表，其中每个列表项都有一个列表。嵌套列表的行为似乎不正常。我在这里做错了什么？

http://jsfiddle.net/89sqw/

嵌套列表没有平方列表类型，边距全错。

Answer 1

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

Answer 2

几个问题：

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

2）你没有关闭你的“P”标签。结束标签有一个斜杠 ( </p>)

3）您在将包含块元素的元素上使用 display: inline 。这是无效 的不好的做法，可能会给您带来问题。使用 inline-block 代替：

#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 lidisplay: inlinedisplay: block;

列表项的正确显示是：

display: list-item;

此外，要在列表项上恢复间距，请在ul元素上设置左侧填充。

小提琴