Question

我成功地水平显示了一个列表：

<div id="container">
        <div id="header">                
                <h:form>
                    <ul>
                        <li><a href="#">Peter</a></li>
                        <li>
                            <p:commandLink value="Profile" ajax="false"
                                           actionListener="#{myBean.myProfile}"/>
                        </li>      
                    </ul>                      
                </h:form>
        </div>
</div>
    <!--
    <div id="MainContainerPanel">
        <div id="LeftPanel" style="border: 2px solid gray; width: 190px; padding: 5px;">

        </div>
        <div id="CenterPanel">

        </div>
        <div id="RightPanel">

        </div>
        <div id="adsPanel"/>
    </div>
    -->

但是，如果我取消注释<div id="MainContainerPanel">，那么我就会遇到一个奇怪的错误。 Peter是一个超链接，但我必须将鼠标移到Peter的顶部才能点击它。 请点击此链接，以便能够看到我在说什么。我可以通过此网站重新创建错误 http://jsfiddle.net/Tuvzj/21/

这是我的CSS

#header{
    height: 30px;
    width: 100%;
    padding: 0 10px;
    vertical-align: middle;
    display: table-cell;
    color: gray; font-weight: bold;                
}
#container{
    position: absolute;
    top:0px;
    left:0px;
    right:0px;
    border-bottom: 2px solid gray;
}
#header ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
}

#header li{
    display: inline;
    padding-right: 20px;
}
#MainContainerPanel
{
    position:absolute;  
    top:10px;
    left: 10px;
    right:10px;
    bottom:10px;

    font-size: 12px/*{fsDefault}*/;
}
#LeftPanel
{
    position:absolute;    
    left:0px;
    top:60px;
    height: 100%;        
}
#CenterPanel
{
    position:absolute;
    left:240px;
    width: 500px;
    top:60px;
    height: 100%;
}
#RightPanel
{
    position:absolute;
    left:780px;
    top:60px;
    height: 100%;
    width:230px;
    padding: 10px;
    border: 2px solid gray;
}

Answer 1

问题是#mainContainerPanel覆盖了名称菜单。如果您添加margin-top: 2em（或任何强制#mainContainerPanel向下移动页面足以删除重叠的值），问题就会得到解决。

CSS：水平显示列表时的错误

1 个答案: