目錄隱藏其他元素

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

目錄隱藏其他元素

回答

相關問題