css - 为什么此文本以较小的屏幕尺寸换行？

Question

我有这个网站，在屏幕尺寸小于 725 像素的情况下，页脚导航显示为两行。我可以使用它来修复它，white-space: nowrap;但我想知道它为什么会发生，文本还有很多空间。版权声明也是如此，但尺寸较小。

导航的 html 如下所示：

<footer>
    <nav>
        <ul>
            <li><a href="https://jcubic.wordpress.com" rel="">blog</a></li>
            <li><a href="#" rel="">projects</a></li>
            <li><a href="#" rel="">tutorials</a></li>
            <li><a href="#" rel="">portfolio</a></li>
            <li><a href="#" rel="">poezja</a></li>
        </ul>
    </nav>
    ...
</footer>

和CSS：

footer {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
}
footer nav {
    position: absolute;
    left: 40px;
    bottom: 0;
}
footer nav ul {
    list-style: none;
    float: left;
    margin: 0;
    padding: 0;
}
footer nav ul li:after {
    content: "•";
    margin: 0 10px;
}
footer nav ul li {
    float: left;
}
footer nav ul li:last-child:after {
    content: "";
}
footer #copy {
    position: absolute;
    bottom: 0;
    margin: 0;
    padding: 0;
}
@media screen and (min-width: 801px) {
    footer #copy {
        right: 60px;
    }
}
footer #copy p {
    margin: 0;
}
footer nav ul li a {
    text-decoration: none;
}
@media screen and (max-width: 800px) {
    footer {
        height: 40px;
    }
    footer nav {
        left: 50%;
        top: 0;
    }
    footer nav ul {
        position: relative;
        left: -50%;
    }
    footer #copy {
        left: 50%;
        bottom: -20px;
    }
    footer #copy p {
        position: relative;
        left: -50%;
    }
}

Answer 1

为您的身体添加最小宽度。当视口小于该值时，将出现滚动条。

body {
   min-width: 800px;
}

Answer 2

您有以下 CSS

footer nav {
    left: 50%;
    top: 0;
}
footer nav ul {
    position: relative;
    left: -50%;
}

这意味着 nav 元素，因为它的左边是父元素的 50%，所以隐含的最大宽度是剩余的 50%（父宽度的）。

之后 ul 向左移动的事实并没有使宽度变大。

只需将导航左侧更改为较低的值，它就会起作用。