Question

我一直在开发一个网络应用程序，我意识到我可以选择任何东西，使用链接，甚至使用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>

Answer 1

据我所知，标签上的mdl-layout__container类是先于其他任何东西，因此您无法选择任何内容，因为此布局适用于所有内容。 - Tomisol

无法选择任何内容 - Material Design Lite

1 个答案: