1

基本的に、私はナビゲーションバーを持っています。ボタンがすべて画面上にある場合、残りのスペースは一般的な div で埋められます。

クロムでは、これは正しく機能します。別名、上部にきちんとしたバーが 1 つ表示されます。

Firefox または IE では、代わりに少しドロップダウンされます。私が意味することの例についてはffまたはIEのフィドルを参照してください。明らかでない場合は、私が望むものについてはクロムを参照してください。ありがとう！

http://jsfiddle.net/yKKUq/2/

私は単純なヘッダーを持っています

           <div style="width: 100%; min-height: 50px;">
                <ul id="navlist">
                    <li><a>Button</a>

                    </li>
                    <li><a>Button</a>

                    </li>
                </ul>
                <div id="navlistfiller" style=""></div>
            </div>

CSSで：

ul#navlist {
    padding:10px;
    font: bold 12px Arial, sans-serif;
    display: inline;
}
ul#navlist li {
    float:left;
    margin-right:20px;
    display:inline-block;
    zoom:1;
    position:relative;
    width:108px;
    height: 50px;
    list-style: none;
    color:#757575;
}
ul#navlist li a {
    display: inline-block;
    vertical-align: middle;
    text-decoration:none;
    padding:5px 10px;
    width:95px;
    height: 40px;
}

ul#navlist li a {
    background:red;
}
ul#navlist li a:hover {
    background:#EAEFF2;
}
ul#navlist li a.current-menu-item {
    color:#fff;
    background:#333366;
}
ul#navlist li a.current-menu-item:hover {
    background:#EAEFF2;
}
#navlistfiller {
    margin-left: 250px;
    height: 50px;
    background-color: green;
    vertical-align: top;
}
html {
    background-color: white;
    margin: 0;
    padding: 0;
}
body {
    min-width: 1200px;
    background-color: #fff;
    color: #333;
    font-size: .85em;
    font-family:"Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}
4

2 に答える 2

2

paddingから取り出すだけulです：

ul#navlist {
    font: bold 12px Arial, sans-serif;
    display: inline;
}

デモは次のとおりです。

http://jsfiddle.net/yKKUq/3/

于 2013-02-18T12:53:21.030 に答える