如何将我的物化下拉按钮放到右侧?

时间:2017-10-05 12:30:43

标签: html css materialize dropdown

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

    <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

1 个答案:

答案 0 :(得分:1)

只需添加以下css

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

您还可以查看Updated Codepen.