html - 如何将我的物化下拉按钮放在右边？

Question

由于某些原因，我无法将下拉按钮放在页面的右边缘，这是我的代码:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<div class="container">
      <ul id="dropdown" class="dropdown-content">
         <li><a href="#accueil">Accueil</a></li>
         <li><a href="#entreprise">Notre entreprise</a></li>
         <li><a href="#réalisations">Nos réalisations</a></li>
         <li><a href="#contact">Contact</a></li>
      </ul>
      <a class = "btn dropdown-button" href = "#" data-activates = "dropdown">Mail Box
         <i class = "mdi-navigation-arrow-drop-down right"></i></a>
   </div>

这是我拥有的:https://codepen.io/anon/pen/pWpRRz

Answer 1

只需添加以下css

.container {
  position: fixed;
  top: 5%;
  right: 0;
  left: 0;
}
.btn{
  float: right;
}

您还可以检查 Updated Codepen.