li项目列表反向

发布于 2025-01-24 09:42:08 字数 895 浏览 0 评论 0原文

这是我的投资组合： http://nayer.42web.io/ 我已经使用了HTML，CSS和Bootstrap。我的LI元素有一个问题，我无法弄清楚。他们都相反地列出了标题和页脚。例如，我的标题为：

<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关于联系项目。当然，我可以反向列出它们，因此当它被逆转时，它以正确的顺序显示，但是我想知道我的代码问题是什么。提前致谢

原文

This is my portfolio: http://nayer.42web.io/
I have used HTML, CSS, and Bootstrap. There is a problem with my li elements which I can't figure out. They all list in reverse, both header and footer. For example, I have my header as:

<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>

But on my page, it gets listed in the following order: Nayer About Contact Projects.
Of course, I can list them in reverse myself so when it gets reversed it shows in the right order, but I wonder what my code's issue is.
Thanks in advance

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

呆萌少年 2025-01-31 09:42:08

您在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 float float prom prom prom prom prock

You have this on your css:

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

The float right sets your first item to the far right position, then the second items on it left and so on ... which reverses the order. Then you have a float left for your "Nira" item that sets it to the far left.

You can refer to this for more details: HTML float right element order

回复收藏 0 原文

~没有更多了~