Question

根据这篇评价良好的SO帖子Proper way to make HTML nested list?，制作嵌套列表的最佳实践方法是：

<ul>
    <li>List item one</li>
    <li>List item two with subitems:
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li>Final list item</li> </ul>

然而，我确实遇到了以这种方式制作列表的真正问题。我希望列表中的每个项目都具有特定的高度但我不能使用li { height: 40px; }，因为第二个li的高度还包括所有内部列表。请参阅此处以获取示例http://jsfiddle.net/rujg3zyk。

问题归结为第二个外部li元素包含一些纯文本和块显示元素。这似乎是一种代码味道＆＃39;对我来说。

什么是格式化此列表的最佳方式，以便每行高40px？

Answer 1

您在此处提供的方式不是有效的语法：

<ul>
    <li>List item one</li>
    <li>List item two with subitems:</li>
    <!-- Problem here... -->
    <ul>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
    </ul>
    <li>Final list item</li>
</ul>

在这种情况下，您无法将<ul>直接嵌套在<ul>下。你需要做的是：

<ul>
    <li>List item one</li>
    <li>List item two with subitems:
    <ul>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
    </ul>
    </li>
    <li>Final list item</li>
</ul>

以上代码完全有效。您无需使用height，但可以尝试使用min-height。我强烈建议您不要使用height（因为必须通过内容计算）。

Answer 2

您的代码 你的代码：

showDialog(context: context, builder: (_) => bodyProgress,);

是正确的，您需要进行以下修改：

嵌套列表应该是位于嵌套列表的<ul> <li>List item one</li> <li>List item two with subitems: <ul> <li>Subitem 1</li> <li>Subitem 2</li> </ul> </li> <li>Final list item</li> </ul>元素内。

链接到列表中的W3C Wiki（摘自下面的评论）：HTML Lists Wiki。

链接到HTML5 W3C <li>规范：HTML5 ul。请注意，ul元素可能包含零个或多个ul个元素。这同样适用于HTML5 ol。说明列表（HTML5 dl）类似，但同时允许li和dt元素。

更多备注：

dd =定义列表。
dl =有序列表（数字）。
ol =无序列表（项目符号）。

Answer 3

应用行高而不是高度

ul li {
  background-color:yellow;
  line-height:40px;
}

ul li li {
 background-color:red;
 line-height:40px;
}

身高：40px将对所有列出的项目应用40px，因此两个clild＆＃39; li＆＃39;不适合父母＆＃39; li＆＃39;

的40px

Answer 4

我不知道这是否是您要找的，但您可以使用min-height代替height：

＆＃13;

ul li {
  background-color:yellow;
  min-height: 40px;
}

ul li li {
  background-color:red;
}

＆＃13;

<ul>
  <li>List item one</li>
  <li>List item two with subitems:
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
  <li>Final list item</li>
</ul>

＆＃13;

当然，如果有更多内容，它可以扩展到更高的高度，这就是为什么我不确定这是否是您正在寻找的。

希望这有帮助。

在CSS

4 个答案: