8

学習プロセスとしてHTML5/CSS3を試していますが、ページ全体の他のセクションへのリンク用のナビゲーションバーを作成するのに苦労しています。見つかったチュートリアルのコードを適応させましたが、動作しますが、1080pの解像度で表示した場合にのみ、幅が小さい場合、バーは他の行に折り返されます。

ユーザーが使用している解像度に関係なく、ナビゲーションバーが1行だけ（収まるように縮小）するようにするにはどうすればよいですか？

img

これがナビゲーションバーのCSSコードです。navの下で、ボタンを中央に配置するために、幅を33.3％に設定し、パディングを同じに設定していることに注意してください。これが原因かどうかはわかりません。 

nav {
    display:block;
    position: absolute;
    left:0; 
    white-space:nowrap; 
    margin: 0 auto; 
    width: 33.3%; 
    background-color:#ff6600;
    padding-left: 33.3%; 
    padding-right: 33.3%; 
} 

nav ul { 
    margin: 0 auto; 
    width: 100%; 
    list-style: none;
    display: inline;
    white-space:nowrap; 
} 

nav ul li { 
    float: left;
    position: relative;
    white-space:nowrap; 
} 

nav ul li a { 
    display: block; 
    margin: 0 auto; 
    width: 150px; 
    font-size: 16px;
    font-family: century gothic; 
    line-height: 44px; 
    text-align: center; 
    text-decoration: none; 
    color:#575757;
    white-space:nowrap; 
} 

nav ul ul { 
    width: 200px;
    position:absolute; 
    top:-99999px; 
    left:0; 
    opacity: 0; 
    -webkit-transition: opacity .4s ease-in-out; 
    -moz-transition: opacity .4s ease-in-out; 
    -o-transition: opacity .4s ease-in-out; 
    transition: opacity .4s ease-in-out; 
    z-index:497; 
    background:#333; 
    padding: 2px; 
    border:1px solid #444; 
    border-top:none; 
    box-shadow:#111 0 3px 4px; 
}


nav ul ul li a { 
    display: block;
    width: 200px;
    text-align: left;
    padding-left: 3px;
    font-size: 14px;    
}   



nav ul li:hover>ul{
    opacity: 1; 
    position:absolute; 
    top:98%; 
    left:0;

}


nav ul li a:hover { 
    color: #fff;
    background-color: #cc3300 
} 

nav ul li.selected a { 
    color: #fff; 
    background-color: #cc3300; 
}
4

3 に答える 3

11

あなたはほとんど正しくそれをしました。cssの問題は、要素に対してwhite-space: nowrap;のみ機能することですが、を使用しています。フローティング要素は、そのような要素にプロパティを設定してもブロックレベルになります（適用されません）。したがって、フロートを次のように置き換えると、プロパティは機能します:)inlinefloatdisplay: inline;display: inline-block;white-space

の実例でありinline-block、white-spaceここで見ることができます：http: //jsfiddle.net/skip405/wzgcH/

センタリング方法に関しては、より良い解決策があります。（を削除しpaddingて適切な幅を設定できます）特にインラインブロックを使用している場合。親に設定text-align: center;するだけで、中央に配置されます。

于 2012-07-30T20:13:33.647 に答える
0

問題は、nav幅をわずか33.3％に設定し、残りをパディングすることです。小さな許容スペースは、特定のポイントを超えてサイズ変更されたときに、すべての要素を互いに押し下げています。これを防ぐには、2つのことを行うことができます。代わりに、ナビゲーション幅を100％に設定します。次に、サイズをまったく変更したくない場合は、すべての要素のmin-width合計を指定する必要があります。a幅を合わせたもの。max-widthまた、レスポンシブデザインを使用している場合を除いて、おそらくそれも与える必要があります。これが私があなたの修正されたcssと一緒にまとめたデモです：http：//jsfiddle.net/c3HE6/

于 2012-07-30T19:59:58.213 に答える
0

ここでのもう1つの良いオプションは、ナビゲーションバーのすべての要素の表示プロパティを調べて変更したくない場合は、ナビゲーションバーのスタイルを最小幅に指定することです。これにより、画面サイズを小さくしたときに折り返されるのを防ぎます。

于 2020-01-02T04:13:22.823 に答える