1

私はこのサイトを持っており、画面サイズが 725px より小さい場合、フッター ナビゲーションが 2 行で表示されます。を使用して修正できますwhite-space: nowrap;が、なぜそれが起こっているのか知りたいのですが、テキストには多くのスペースが残っています。同じことが著作権表示にも起こりますが、サイズが小さくなります。

nav の 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%;
    }
}
4

2 に答える 2

2

体に最小幅を追加します。ビューポートがその値より小さくなると、スクロールバーが表示されます。

body {
   min-width: 800px;
}
于 2013-09-10T10:02:24.937 に答える
1

次のCSSがあります

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

これは、nav 要素の左側が親の 50% であるため、(親の幅の) 残りの 50% が暗黙の最大幅であることを意味します。

その後、ul を左に移動しても、幅が大きくなることはありません。

左のナビゲーションを低い値に変更するだけで機能します。

于 2013-12-27T17:43:31.153 に答える