为什么这个文字包含更小的屏幕尺寸？

Question

我有site，屏幕尺寸小于725px，页脚导航显示为两行。我可以使用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向左移动不会使宽度变大。

只需将导航栏左侧更改为较低的值即可。