1

まず、コードは次のとおりです。

#menu {
    padding:0;
    margin-top:0px;
    position:absolute;
    top:0px;
    width:100%;
    float:left;
    overflow:hidden;



}


#menu li {
    list-style:none;
    float: left;
    position: relative; 
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border:1px solid black; 
    background-image: linear-gradient(#F2FF00, #AEFF00);
    margin-left:10px;
}



#menu a {
    display:block;
    padding:auto;
    text-align:center;
    padding:10px 10px;


    color: #0095FF;
    text-transform: uppercase;
    font: bold 25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 1px 1px 2px #0095FF;
}

ウィンドウを縮小するとボタンが下に移動します。高さをメニューに設定して変更できない場合でも、ボタンがメニュー要素の外に出てしまうのはなぜですか?

ここに jsFiddle があります: http://jsfiddle.net/nqdXc/

4

1 に答える 1

1

メニューに 100% の幅があり、li の上に左にフロートします。メニューが li に収まらない場合、それらはドロップダウンします。これは予期される動作です。

あなたが達成しようとしている効果はわかりませんが、メニューの最小幅を次のように設定できます。

#menu {
    min-width: 360px;
}

ご希望の効果をお知らせいただければ、さらにお手伝いできる可能性があります

于 2013-09-14T19:08:36.083 に答える