CSS 媒体查询下的链接顺序颠倒

Question

我有一组用于网站导航的链接。当 window 达到特定宽度时，我有一些 media queries 可以帮助正确显示导航。除了 window 调整大小时链接被反转之外，一切都工作正常。为什么会这样？

JSFiddle: http://jsfiddle.net/snpx63mx/

标记

<header>
    <h1><strong>Henry</strong><span id="notbold">+Applications</span></h1>
    <nav>
        <ul>
            <li id="contact"><div id="contactanimation"><a href="contact.html">Contact</a></div></li>
            <li id="project"><div id="projectanimation"><a href="projects.html">Project</a></div></li>
            <li id="me"><div id="meanimation"><a href="about.html">Me</a></div></li>
        </ul>
    </nav>
</header>

CSS

header h1
{       
    font-size: 40px;
    float: left;
    font-weight: 100;
}

header nav
{
    float: right;
}

header nav ul
{
    list-style-type: none;
    margin: 0;
    vertical-align: middle;
    line-height: normal;
    float: right;
    z-index: 999;
    position: relative; /* add this */
}

header nav ul li
{
    line-height: 15px;
    float: right;
    padding: 45px;
    font-size: 22px;
    font-weight: 100;
    text-align: center;
}

header nav ul li a
{
    color: black;
    text-decoration: none;
}

@media screen and (max-width: 1160px) {
    header h1
    {
        float: none;
        text-align: center;
        font-size: 36px;
    }

    header nav
    {
        width: 100%;
        margin-right: 20px;
    }

    header nav ul
    {
        float: none;
        text-align: center;
    }

    header nav ul li
    {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        padding: 25px;
    }
}

Answer 1

JSFIDDLE：http://jsfiddle.net/snpx63mx/2/

您的 li 标签上有一个浮动项。这意味着当处于更宽的断点时，您的底部 li 将位于左侧。当它变得更小的宽度时，li 会堆叠在一起，并按照 li 在 html 中列出的顺序从上到下显示。如果您订购了这样的列表项：

        <li id="me"><div id="meanimation"><a href="about.html">Me</a></div></li>
        <li id="project"><div id="projectanimation"><a href="projects.html">Project</a></div></li>
        <li id="contact"><div id="contactanimation"><a href="contact.html">Contact</a></div></li>

然后修改您的 css 使其向左浮动，两种尺寸的顺序相同。

Answer 2

就是我评论里说的，把float: right改成float: left:

header nav ul li
{
    float: left;
}

FIDDLE: https://jsfiddle.net/lmgonzalves/snpx63mx/1/

CSS 媒体查询下的链接顺序颠倒

Order of Links reverses under CSS Media Query

html

css

media-queries