li 项目列表反向

Question

这是我的投资组合：http://nayer.42web.io/ 我用过 HTML、CSS 和 Bootstrap。我的 li 元素有问题，我无法弄清楚。它们都以相反的方式列出，包括 header 和页脚。例如，我的 header 为：

<header id="header">
        <nav id="main-nav">
            <ul class="menu">
                <li id="brand" style="float:left; font-family:'Dancing Script', sans-serif;font-weight:800;font-size:1.5rem"><a href="index.php">Nira</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#logos">Contact</a></li>
                <li><a href="about.html">About</a></li>

            </ul>
        </nav>
    </header>

但在我的页面上，它按以下顺序列出：Nayer About Contact Projects。当然，我可以自己将它们倒过来列出，这样当它被倒过来时它会以正确的顺序显示，但我想知道我的代码的问题是什么。提前致谢

Answer 1

你的 css 上有这个：

nav li {
    float: right;
    padding-top: 1em;
    padding-bottom: 1.3em;
    padding-right: 1.1em;
    padding-left: 1.1em;
    vertical-align: middle;
}

右边的浮动将您的第一个项目设置到最右边的位置，然后是它左边的第二个项目，依此类推...这颠倒了顺序。然后你的“Nira”项目有一个浮动，将它设置在最左边。

详情可以参考这里：HTML float right element order

li 项目列表反向

li items list in reverse

css

bootstrap-4