Question

我的网站导航有一组链接。当窗口达到一定宽度时，我有一些media queries可以帮助正确显示导航。一切正常，除了窗口调整大小时链接反转的事实。为什么会这样？

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堆叠在彼此的顶部，并且从顶部顶部底部按照html中列出的lis的顺序显示。如果你订购了这样的列表项：

        <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 Media Query下反转

2 个答案: