1

画面の 80% と最小 960 ピクセルにまたがるコンテナー内で、5 つの水平メニュー要素を「float:left」で並べようとしています。このために、最初に最小幅を 192 ピクセル (960/5) に設定し、幅を 20% に設定しましたが、1 ピクセルの境界線を追加するとうまく機能せず、ボタンの 1 つが「投げ出される」原因になることにすぐに気付きました。

幅をそれぞれ 19.895333% と 191px に変更すると問題は解決しましたが、これは明らかにハッキーな解決策であり、メニューの右側に 2 ～ 3 ピクセルの見苦しいスペースが残ります。

これらの要素を整列させ、ボーダーやパディングなどによって追加されるボーナス幅を考慮する、よりエレガントな方法はありますか? 「overflow:hidden」を試して、コンテナの外側に突き出る可能性のあるものを単純に非表示にしましたが、これは 5 番目のボタン全体を非表示にするだけです。

結果を説明する図: ここに画像の説明を入力

HTML コード:

    <div class="menucontainer">
        <div class="menutab" id="menutab_first">News</div>
        <div class="menutab">Game Guide</div>
        <div class="menutab">Articles</div>
        <div class="menutab">Media</div>
        <div class="menutab" id="menutab_last">Community</div>
    </div>

CSS コード:

.menucontainer {
    height: 26px;
    margin-left: auto;
    margin-right: auto;
    border-width: 1px;
    border-style: solid;
    border-color: #303030 #101010 #000 #101010;
    border-radius: 0px 0px 8px 8px;
}

.menutab {               
    line-height: 26px;
    float: left;
    width: 19.895333%;
    text-align: center;
    min-width: 191px;
    border-right: 1px solid #202020;
    background-image: url('../img/menubutton2.png');
    background-size: 100% 100%;
    font-family: 'Cabin', sans-serif;
}

#menutab_first {
    border-radius: 0px 0px 0px 8px;
}

#menutab_last {
    border-right: 0px;  
    width: 20%;
    min-width: 192px;  
    border-radius: 0px 0px 8px 0px;
}

前もって感謝します！

4

3 に答える 3

1

box-sizing: border-boxにより、境界線の幅が 20% の一部としてカウントされます。これが最善の解決策ですが、それが何らかの形でレイアウトに干渉する場合は、代わりcalcに 20% から境界線を差し引くこともできます。

于 2013-11-01T11:41:37.390 に答える
1

必要なのはbox-sizing:border-box;

この CSS プロパティは、標準のボックス モデルのように の外側ではなく、borderの内側に含まれるように、要素のボックス モデルを変更します。width

これは、ボックスが 20% + ボーダーの幅ではなく、ページの幅の 20% になることを意味します。

問題が解決しました。

于 2013-11-01T11:38:24.813 に答える