1

作成中の css ベースのドロップダウン メニューに問題があります。<ul>andで構築されており<li>、画面の 70% にしたいので、css に次のように記述します。

.m_wrapper {
    position:relative;
    width:100%;
    display:block;
    padding:0;
    margin:0px 0px 10px 0px;
}
.menu * {
    position:relative;
}
.m_wrapper ul {
    position:relative;
    width:70%;
    margin:0 auto;
    display:table;
    height:20px;
    padding:0;
    list-style-type:none;
}
.m_wrapper li {
    position:relative;
    width:20%;
    float:left;
    padding: 5px 0px 5px 5px;
    border: 1px solid blue;
    height:20px;
}

これをJFiddle hereに入れ、ページにも存在する他のいくつかの要素を加えました。他のオブジェクトも 70% であるため、メニューの側面をそれらに合わせたいと考えています。問題は、が完全に<li>満たされていない<ul>ため、右側が整列していないことです。リスト項目の幅を広げようとしましたが、ある画面で見栄えがよくなると、項目が広すぎて、解像度の低い別の新しい行に「ジャンプダウン」しました。

私は問題をグーグルで検索し、StackOverflowでいくつかの質問と解決策を読みましたが、これまでのところ両方の画面解像度で何も機能せず、アイデアがありません. ですから、助けていただければ幸いです。

4

1 に答える 1

1

width表示されている問題は、パディングと境界線の幅が追加される前に、CSS が要素の内部幅を指定しているためです。box-sizingこれは次のプロパティで変更できます。

width:25%; /* because you have four menu items */
box-sizing:border-box; /* include border width and padding in element width */
-moz-box-sizing:border-box; /* For FF */

すべてのブラウザでサポートされbox-sizingているわけではありません。

JSFiddle

于 2013-04-26T14:50:34.223 に答える