1

基本上，我有一个导航栏。当按钮都在屏幕上时，其余的空间被一个通用的 div 填充。

在 chrome 上，这可以正常工作。又名，您在顶部有一个整洁的酒吧。

在 firefox 或 IE 上，它反而会下降一点。请参阅 ff 或 IE 中的小提琴，例如我的意思，如果不明显，请参阅我想要的 chrome。谢谢！

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 回答
0

将以下 CSS 添加到 #navlistfiller

显示：内联块；宽度：108px；

并删除 margin-left:250px;

于 2013-02-18T13:45:31.273 回答