html - 如何使字形或图像在 sidenav 中正确对齐

Question

我怎样才能使图片或字形图标始终位于右侧，而不管文本的长度如何？在当前表单中，如果左侧的文本被放大，则对齐会丢失。我尝试使用 align="right"但它不起作用，有什么想法吗？

#mySidenav a {
  position: fixed;
  left: -145px;
  transition: 0.3s;
  padding: 15px;
  width: 180px;
  text-decoration: none;
  font-size: 20px;
  color: white;
  border-radius: 0 5px 5px 0;
  z-index: 100;
}

#mySidenav a:hover {
  left: 0;
}

#about {
  top: 80px;
  background-color: #4CAF50;
}

#blog {
  top: 140px;
  background-color: #2196F3;
}

#projects {
  top: 200px;
  background-color: #f44336;
}

#contact {
  top: 260px;
  background-color: #555
}

<div id="mySidenav" class="sidenav">
  <a href="#" id="about">Money: 500 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&euro;</a>
  <a href="#" id="blog">test: &nbsp;&nbsp;&nbsp; <span class="glyphicon glyphicon-bell" align="right"></span></a>
  <a href="#" id="projects">test</a>
  <a href="#" id="contact">Contact</a>
</div>

Answer 1

清理   并在 $euro 和 css 等图标上使用 .glyphicon 类向右浮动

#mySidenav a {
  position: fixed;
  left: -145px;
  transition: 0.3s;
  padding: 15px;
  width: 180px;
  text-decoration: none;
  font-size: 20px;
  color: white;
  border-radius: 0 5px 5px 0;
  z-index: 100;
}

#mySidenav a:hover {
  left: 0;
}

#about {
  top: 80px;
  background-color: #4CAF50;
}

#blog {
  top: 140px;
  background-color: #2196F3;
}

#projects {
  top: 200px;
  background-color: #f44336;
}

#contact {
  top: 260px;
  background-color: #555
}

.glyphicon {
  float: right;
}

<div id="mySidenav" class="sidenav">
  <a href="#" id="about">Money: 500 <span class="glyphicon">&euro;</span></a>
  <a href="#" id="blog">test: <span class="glyphicon glyphicon-bell">🔔</span></a>
  <a href="#" id="projects">testtesttesttesttesttesttesttesttesttesttesttesttesttest</a>
  <a href="#" id="contact">Contact</a>
</div>