Question

基本上，我有一个导航栏。当按钮全部在屏幕上时，剩下的空间都填充了一个通用div。

在Chrome上，这可以正常工作。阿卡，你在顶部有一个整洁的酒吧。

在firefox或IE上，它会被降低一点。请参阅ff或IE中的小提琴，例如我的意思，以及我想要的Chrome，如果不明显的话。谢谢！

我有一个简单的标题

           <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;
}

Answer 1

从您的padding：

中取出ul

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

这是你的演示：

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

Answer 2

将以下CSS添加到#navlistfiller

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

并删除margin-left：250px;

css在firefox和IE中推送元素

2 个答案: