無法選擇任何東西 - 材料設計精簡版

我一直在研究一個網絡應用程序，我意識到我可以選擇任何東西，使用鏈接，甚至使用Material Design Lite滑塊。我沒有與z-index或任何東西混淆，所以我不認爲是這樣。我也用過一個HTML驗證器，除了一些小東西外，每件事似乎都很好。無法選擇任何東西 - 材料設計精簡版

<!DOCTYPE HTML> 
 

 
<head> 
 
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.blue-light_blue.min.css" /> 
 
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script> 
 

 
<style> 
 
.tile { 
 
    max-width: 700px; 
 
    max-height: 700px; 
 
    min-width: 200px; 
 
    min-height: 200px; 
 
    display: inline-block; 
 
    margin: 5px; 
 
    color: white; 
 
} 
 

 
body { 
 
    background-color: black; 
 
} 
 

 
.player { 
 
    display: block; 
 
    width: 700px; 
 
    margin: 0 auto; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: white; 
 
    color: black; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    position: fixed; 
 
    height: 80px; 
 
} 
 
</style> 
 
</head> 
 

 
<body> 
 

 
<div class="player"><!-- Slider with Starting Value --> 
 
<input class="mdl-slider mdl-js-slider" type="range" 
 
    min="0" max="100" value="25" tabindex="0"></div> 
 

 
<!-- Always shows a header, even in smaller screens. --> 
 
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> 
 
    <header class="mdl-layout__header mdl-color--black"> 
 
    <div class="mdl-layout__header-row"> 
 
     <!-- Title --> 
 
     <span class="mdl-layout-title" style="font-weight: bold;">My Library</span> 
 
     <!-- Add spacer, to align navigation to the right --> 
 
     <div class="mdl-layout-spacer"></div> 
 
     <!-- Navigation. We hide it in small screens. --> 
 
     <nav class="mdl-navigation mdl-layout--large-screen-only"> 
 
     <a class="mdl-navigation__link" href="#"></a> 
 
     <a class="mdl-navigation__link" href="#"></a> 
 
     <a class="mdl-navigation__link" href="#" style="margin-right: -30px; color: #BDBDBD;"><i class="material-icons">search</i></a> 
 
     <a class="mdl-navigation__link" href="#" style="margin-right: -40px; color: #BDBDBD;"><i class="material-icons">more_vert</i></a> 
 
     </nav> 
 
    </div> 
 
    </header> 
 
    <div class="mdl-layout__drawer"> 
 
    <span class="mdl-layout-title">Title</span> 
 
    <nav class="mdl-navigation"> 
 
     <a class="mdl-navigation__link" href="">Link</a> 
 
     <a class="mdl-navigation__link" href="">Link</a> 
 
     <a class="mdl-navigation__link" href="">Link</a> 
 
     <a class="mdl-navigation__link" href="">Link</a> 
 
    </nav> 
 
    </div> 
 
    <main class="mdl-layout__content"> 
 
    <div class="page-content"><!-- Your content goes here --></div> 
 
    </main> 
 
</div> 
 

 
<div style="height: 65px;"></div> 
 

 
<div class="tile" style="background-color: #F37F80; width: 300px; height: 400px;"> 
 

 
    <img src="https://f1.bcbits.com/img/a1417614898_10.jpg" style="width: 300px; height: 300px;"> 
 
<div style="margin-left: 20px;"> 
 
    <h4>Never Ever <i style="float: right; font-size: 36px; margin-right: 25px;" class="material-icons">star_border</i></h4> 
 
    <p style="margin-top: -20px;">STRFKR</p> 
 
</div> 
 
</div> 
 

 
<div class="tile" style="background-color: #F85A2A; width: 300px; height: 400px;"> 
 

 
    <img src="http://ecx.images-amazon.com/images/I/71G9MyYIecL._SL1300_.jpg" style="width: 300px; height: 300px;"> 
 
<div style="margin-left: 20px;"> 
 
    <h4>Around The World <i style="float: right; font-size: 36px; margin-right: 25px;" class="material-icons">star_border</i></h4> 
 
    <p style="margin-top: -20px;">Daft Punk</p> 
 
</div> 
 
</div> 
 

 
<div class="tile" style="background-color: #277486; width: 300px; height: 400px;"> 
 

 
    <img src="http://beardedgentlemenmusic.com/wp-content/uploads/2014/03/Foster-The-People-Supermodel-Album-Cover.png" style="width: 300px; height: 300px;"> 
 
<div style="margin-left: 20px;"> 
 
    <h4>Supermodel <i style="float: right; font-size: 36px; margin-right: 25px;" class="material-icons">star_border</i></h4> 
 
    <p style="margin-top: -20px;">Foster the People</p> 
 
</div> 
 
</div> 
 

 
<div class="tile" style="background-color: #BBC678; width: 300px; height: 400px;"> 
 

 
    <img src="http://beatsperminute.com/wp-content/uploads/2012/12/Miracle-Mile.jpg" style="width: 300px; height: 300px;"> 
 
<div style="margin-left: 20px;"> 
 
    <h4>Miracle Mile <i style="float: right; font-size: 36px; margin-right: 25px;" class="material-icons">star_border</i></h4> 
 
    <p style="margin-top: -20px;">STRFKR</p> 
 
</div> 
 
</div> 
 

 
<div class="tile" style="background-color: #FD533C; width: 300px; height: 400px;"> 
 

 
    <img src="https://upload.wikimedia.org/wikipedia/en/9/9c/Daftpunk-homework.jpg" style="width: 300px; height: 300px;"> 
 
<div style="margin-left: 20px;"> 
 
    <h4>Homework <i style="float: right; font-size: 36px; margin-right: 25px;" class="material-icons">star_border</i></h4> 
 
    <p style="margin-top: -20px;">Daft Punk</p> 
 
</div> 
 
</div> 
 

 
</body> 
 

 
</html>

來源

2016-03-04 seanfrasure

據我所見，'

'標籤上的'mdl-layout__container'類在其他任何東西之前，所以你不能選擇任何東西，因爲這個佈局在所有東西上。 – Suicideboy

據我所看到的，在標籤上您的MDL-layout__container類是先天下之憂，所以因爲這個佈局是一切你不能選擇任何東西。 - Tomisol

來源

2016-03-04 02:17:26 seanfrasure

無法選擇任何東西 - 材料設計精簡版

回答

相關問題