目录隐藏其他元素

HTML：目录隐藏其他元素

<div class="menu-panel"> 
    <h3>Table of Contents</h3> 
     <ul id="menu-toc" class="menu-toc"> 
      <li><a href="landingpage.html">Home</a></li> 
      <li style="border-top: #FFF solid 1px;" class="menu-toc-current"><a href="index.html">Biography</a></li> 
      <li><a href="extra_curricula.html">Extra Curricular</a></li> 
      <li><a href="favorites.html">Favorites</a></li> 
     </ul> 
</div> 
<div class="main"> 
    <h2>Biography</h2>  
    <p>THIS INFO SHOWS UP WITH HEAVY CSS EDITING</p>  
</div>

CSS：

.menu-panel { 
    background: #013E7D; 
    width: 240px; 
    height: 100%; 
    position: fixed; 
    z-index: 1000; 
    top: 0; 
    left: 0; 
    text-shadow: 0 1px 1px rgba(0,0,0,0.1); 
    margin: 0px; 
} 



.menu-panel h3 { 
    font-family:Roboto; 
    font-size: 1.8em; 
    padding: 20px; 
    font-weight: 300; 
    color: #fff; 
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05); 
} 

.menu-toc { 
    list-style: none; 
} 

.menu-toc li a { 
     font-family:Roboto; 
     display: block; 
     color: #C0C0C0; 
     font-size: 1.1em; 
     line-height: 3.5; 
     padding: 0 20px; 
     cursor: pointer; 
     background: #013E7D; 
     border-bottom: 1px solid #FFF; 
} 

.menu-toc li a:hover, 
.menu-toc li.menu-toc-current a { 
    background: #000000; 
} 

.menu-panel div { 
    margin-top: 20px; 
} 

.menu-panel div a { 
    text-transform: uppercase; 
    font-size: 0.7em; 
    line-height: 1; 
    padding: 5px 20px; 
    display: block; 
    border: none; 
    color: #bc0b0b; 
    letter-spacing: 1px; 
    font-weight: 800; 
    text-shadow: 0 1px rgba(255,255,255,0.2); 
} 


@media screen and (max-width: 800px) { 
    .no-js .menu-panel { 
     display: none; 
    } 

    .no-js .container { 
     padding: 0; 
    } 


@media screen and (max-width: 400px) { 
    .menu-panel, 
    .content { 
     font-size: 75%; 
    } 

    .main { 
     margin-left:797px; 
     position:fixed; 
     font-family:Roboto; 
    }

所以基本上我需要得到表的内容是静态的，因此所有其他元素围绕它去！我一直在试图解决这个问题，它不会工作。如果你能帮助我，这将有很大的帮助！谢谢

来源

2015-12-07 A.J. Davis

事物只会“浮现”，因此'menu-toc'必须具有'float：'样式。见[this]（https://drafts.csswg.org/css2/visuren.html#float-position） –

@JimGarrison这没有奏效。 –

.menu-panel { 
    background: #013E7D; 
    width: 240px; 
    height: 100%; 
    z-index: 1000; 
    top: 0; 
    left: 0; 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 
    margin: 0px; 
    float: left; 
}

在CSS中删除位置并添加浮动结果在水平对齐的块。另请参阅http://codepen.io/anon/pen/XXJRWx

来源

2015-12-07 21:42:31 lkiraly

好吧，工作，sorta。目录的其余部分样式现在消失了。谢谢！！摆脱位置后，目录下半部分消失。 @lkiraly –

http://codepen.io/anon/pen/VeYbjY @Ikiraly –

你也可以使用[css reset]（http://meyerweb.com/eric/tools/css/reset/）来创建一个干净的开始。 @一-J-戴维斯 – lkiraly

目录隐藏其他元素

回答

相关问题