css - 尽管 li 的内联 css 设置，网站导航栏列表仍垂直显示

Question

我在练习网站上遇到了 CSS 问题。我正在测试一个网站，我的导航栏“ul”列表设置为内联，但我的列表仍然是垂直显示而不是水平显示。你们知道我可能会遗漏什么吗？

#navbar {
    float: left;
    z-index: 2;
    position: fixed;
    margin-top: -100px;
    left:50%;
    margin-left:-254px;
    background-color: brown;
    height: 200px;
    width: 300px;
    border-radius: 8000px;
}
#navbar ul{
    z-index: 2;
    list-style-type: none;
    position: fixed;
    margin: -10px;
}
#navbar li {
    display: inline;
    text-align: center;
    margin-right: 15px;
    padding-left: 100px;
    padding-top: 5px;
    padding-bottom: 5px;}

这很尴尬，但我正在制作一个 D&D 网站进行练习。这是一个截图: The ill-fated website

我看到了关于添加 flex 的答案，我会尝试并在成功时回复你。

Answer 1

如果您将 display: flex; 添加到您的 ul 的 CSS 中，您将其设为 flexbox 容器 - 默认设置将水平显示导航栏的列表项.

添加/编辑:如果你想在没有 flexbox 的情况下这样做:不要将 display:inline 放在 ul 上，而是放在 li 元素，最好让它成为 inline-block