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

问题描述 投票:0回答:1

不管文本的长度如何,我如何始终使图片或字形图标一直位于右侧?在当前形式中,如果左侧的文本被放大,则对齐方式将丢失。我尝试使用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>
html css
1个回答
0
投票

#mySidenav a {
text-align: right;
  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 &euro;</a>
  <a href="#" id="blog">test: &nbsp;&nbsp;&nbsp; <span class="glyphicon glyphicon-bell" align="right"></span></a>
  <a href="#" id="projects">testtesttesttesttesttesttesttesttesttesttesttesttesttest</a>
  <a href="#" id="contact">Contact</a>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.