html - 侧导航内的右对齐图标按钮

Question

这应该很简单，但是我遇到了问题请帮助我解决这个问题，因为我对 CSS 及其属性完全陌生。

基本上，我希望在侧边导航内有一个宽度等于侧边导航的按钮，当我点击它时，它应该会在其正下方显示一个列表。

但是现在我得到如下，

这是html，

<div class="page">
  <div>
    <mat-toolbar color="primary" class="toolbar">
      <div>
        <button class="menuButton" mat-icon-button (click)="sidenav.toggle()"><mat-icon>menu</mat-icon></button>
        <span class="companyName">Hello</span>
      </div>
    </mat-toolbar>
  </div>

  <mat-sidenav-container class="sideContainer" fullscreen  autosize style="top: 80px !important;">
    <mat-sidenav #sidenav mode="push" opened="false" class="sideNav">
      <nav class="sidenavbutton">
        <button cls="btn">Dashboard <i id="icon" class="fa fa-angle-down"></i></button>
      </nav>
    </mat-sidenav>
  </mat-sidenav-container>
</div>

对应的css是，

.example-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.toolbar{
  background-color: transparent;
}
.menuButton {
    color: black;
}
.companyName {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: orangered;
}

.yaanapage{
  background-color: orange;
}

.sideNav {
  height: 100%; /* 100% Full-height */
  width: 30%; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  top: 0; /* Stay at the top */
  left: 0;
  background-color:orangered; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
.menuItems {
  cursor: pointer;
  position: relative;
  background-color:orangered;
  margin: .5em;
  padding: .3em 0;
  height: 1.6em;
  color: whitesmoke;
  padding: 2%;
  font-size: 100%;
}

.btn {
  margin: 0;
  padding: 3px 6px;
  vertical-align: middle;
  border: none;
  background-color: #535B99;
  color: white;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  text-transform: uppercase;
  width: 100%;
}
#icon {
  float:right;
  display: block;
  margin-left: 10px;
}

Answer 1

如果您将 cls 更改为 class，它会按照您描述的那样工作。我可能还会将 display:block; 添加到 .btn 类。