0

ちょっと説明が難しいのでURLを載せておきます。

http://www.ucaftercruz.comにアクセスしてください

フッターを見ると、縦に並べられた順序付けられていないリストがあります。ブラウザをドラッグして小さくすると、リストが 1 行から 2 行になります。ウィンドウのサイズに関係なく、1 行でフッターの中央に表示されるようにするにはどうすればよいですか?

それは私のdivと関係があると思われます。

これが私のhtmlコードです:

<div style="clear:both;">
   <div id="footer">
    <div id="footer-pages">
        <ul>
            <li><a href="http://www.ucaftercruz.com/about/">About the blog</a></li><span>&#149;</span>
            <li><a href="http://www.ucaftercruz.com/blographies/">The Authors</a></li><span>&#149;</span>
            <li><a href="#">Archives</a></li><span>&#149;</span>
            <li><a href="http://www.ucaftercruz.com/credits/">Credits</a></li><span>&#149;</span>
            <li><a href="http://www.ucaftercruz.com/faq/">FAQ</a></li>
        </ul>
    </div>

そして、ここに私のCSSがあります:

#footer {
    height: 100px;
    background-color: #d0cabc;
    font-size: 12px;
}

#footer a {
    color: #606060;
}

#footer-pages {
    padding: 20px 0;
    border: 0px solid green;
    margin: 0 auto;
    width: 35%;
}

#footer li {
    display: inline-block;
    margin: 0 15px;
}
4

2 に答える 2

0

#footer { white-space: nowrap }フッターの CSS に追加します。min-width:###px### が十分に大きい場所を追加することもできます。

最初のケースでは、テキストを格納するために必要な最小サイズよりもボックスを小さくしないように、レンダリング エンジンに指示します。これがこの種のリストで機能するかどうかは、実際にはわかりません。

私が知っている2番目のケースでは、動作することはわかっていますが、少しエレガントではありません.レイアウトボックスを特定の量よりも小さくしないようにエンジンに強制します-テキストを含む量を選択すると、スクロールバーが追加される場合があります(これはプロパティで制御できoverflowます) が、テキストが折り返されることはありません。

于 2013-04-23T03:14:54.457 に答える