CSS：错误时显示列表水平

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以消除重叠的值），则问题将得到解决。