Question

在html文件中，我将菜单设置为：

    <div id="informheader" class="topmenu">
<ul id="navigationMenu">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Reporting</a></li>
                    <li><a href="#">Dashboard</a></li>
                    <li><a href="#">My Profile</a></li>
                    <li><a href="#">Management Console</a></li>    
            </ul>
</div>

在CSS中

    .topmenu ul a
{
    line-height:36px;
    text-decoration: none;
    color: #ffffff;
    display:inline-block;
    padding: 0px 5px 0px 5px;
    background-position: 100%;
}

.topmenu li a:hover
{
    background-image: url('../images/gradientheaderdark.png');
    height: 36px;
    display: inline-block;
    text-decoration: none;
    background-repeat: repeat-x;
    margin-top:-5px;
    line-height:36px;
}

.topmenu
{
    position: relative;
    display: block;
    width: 80%;
    height: 36px;
    margin: 5px auto;
    text-align: left;
    z-index: 9998;
    -khtml-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -khtml-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
    -ms-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
    -o-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
    -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
    -webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
    box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
    background-image: url('../images/gradientheader.png');
    background-repeat: repeat-x;
}

.topmenu ul
{
    display:inline-block;
    list-style-type: none;
    padding: 0;
    margin: auto 0;
}

.topmenu li
{
    display: inline-block;
    list-style:none;
    padding: 0px 5px 0px 5px;
}

结果在IE中水平呈现子弹列表。但是在Firefox中，列表保持垂直。任何人都可以指出我正确的方向，我错过了什么标签让Firefox在Firefox中水平渲染这个UL列表（以及safari）？将显示切换为块与内联块可以解决IE的问题。

Answer 1

将float: left;添加到.topmenu li

内联块不能水平渲染UL Li元素

1 个答案: