0
我一直在研究一個網絡應用程序,我意識到我可以選擇任何東西,使用鏈接,甚至使用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>
據我所見,''標籤上的'mdl-layout__container'類在其他任何東西之前,所以你不能選擇任何東西,因爲這個佈局在所有東西上。 –
Suicideboy