0

私は自分のサイトのメニュー バーを作成していますが、テストのためにブラウザーの幅を調整しようとするたびに、メニューが左側にぎっしり詰まったリストになります。追加してみましたがdisplay: inline-block、white-space: nowrap機能しません。何か案は？

エラーのスクリーンショット: ここに画像の説明を入力

HTML:

 <div id="header" class="row">  
     <ul class="nav-bar">
                <div class="large-2 columns"><li data-slide="1"><a href="">home</a></li></div>                      
                <div class="large-3 columns"><li data-slide="2"><a href="">portfolio</a></li></div>
                <div class="large-2 columns"><li class="logo"><img src="images/logo.png" /></li></div>
                <div class="large-2 columns"><li data-slide="3"><a href="">about</a></li></div>
                <div class="large-3 columns"><li data-slide="4"><a href="">contact</a></li></div>
            </ul>
</div>

CSS:

div#header {
    width: 960px;
    margin: 0 auto;
    padding: 0;
    color: #FFF;
    /*position: relative;*/
    top: 0;
}
div#header ul{
    height: 128px;
    list-style-type: none;
    white-space: nowrap;
}
div#header ul li {
    display: inline-block;
    background-color: #003264;  
    text-align: center;
    height: 128px;
    line-height: 128px;
    /*padding-left: 15px;
    padding-right: 15px;*/
    font-size: 36px;
    transition: background-color 1s;
    -webkit-transition: background-color 1s;
}

サイト: http://andrewgu12.kodingen.com/

4

2 に答える 2

0

これが発生する理由は、画面幅が十分に縮小されると、Foundation が別の (小さな画面の) CSS を使用するためです。「小さい」幅がないため (「大きい」幅のみ)、Foundation はデフォルトで列を 100% の幅に拡張します。

これは、Foundation の定義済みクラスだけを使用して対処でき、CSS の変更は必要ありません。.nav-barお子様の場合は、単に「小さい」幅も指定してください。

<ul class="nav-bar">
    <div class="large-2 small-2 columns"><li data-slide="1"><a href="">home</a></li></div>                      
    <div class="large-3 small-3 columns"><li data-slide="2"><a href="">portfolio</a></li></div>
    <div class="large-2 small-2 columns"><li class="logo"><img src="images/logo.png" /></li></div>
    <div class="large-2 small-2 columns"><li data-slide="3"><a href="">about</a></li></div>
    <div class="large-3 small-3 columns"><li data-slide="4"><a href="">contact</a></li></div>
</ul>

これは私にとって問題を解決するようです。お探しのものがこれでなかった場合は、お気軽にお問い合わせください。さらにサポートさせていただきます。幸運を！

于 2013-07-29T19:18:54.747 に答える