Question

我在桌子上制作菜单，因为我尝试使用列表，结果不是我的预期，然后，我无法根据DIV的宽度拉伸LI（菜单项），我看到我能做到这与桌子一起工作。

我看到的大多数菜单都是在UL列表中制作的，但有些菜单也在表格中，是否有“规则”或语义包含？

那么HTML列表的CSS中的display属性表呢？

#menu {
    display: table;
    width: 100%;
    border-collapse: collapse;
}

#menu ul {
    display: table-row;
}

#menu li {

    display: table-cell;
    height: inherit;
    border: solid 1px;
    padding: 0;
    margin: 0;
}

Answer 1

我在表格中制作了菜单，因为我尝试使用列表，结果是不是我的预期

没有规则，但我很确定无论您的菜单是什么样子都可以使用无序列表。

您可能会发现无序列表版本的HTML比表格版本少。较少的HTML是好的，因为下载时间会更短。

此外，如果您的菜单只有一个“行”，那么表格真的是正确的表示吗？

Answer 2

您最有可能使用html无序列表实现所需内容。例如，您可以像这样拉伸列表元素：width: 25%; text-align: center;，这样每个列表元素的宽度为25％（4个列表元素= 100％），如果这是您想要的。

关于设计表，已经对SO有了很好的解释。 Why not use tables for layout in HTML?

CSS菜单，表格或列表，正确的方法是什么？

2 个答案: