不管文本的长度如何,我如何始终使图片或字形图标一直位于右侧?在当前形式中,如果左侧的文本被放大,则对齐方式将丢失。我尝试使用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 €</a>
<a href="#" id="blog">test: <span class="glyphicon glyphicon-bell" align="right"></span></a>
<a href="#" id="projects">test</a>
<a href="#" id="contact">Contact</a>
</div>
#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 €</a>
<a href="#" id="blog">test: <span class="glyphicon glyphicon-bell" align="right"></span></a>
<a href="#" id="projects">testtesttesttesttesttesttesttesttesttesttesttesttesttest</a>
<a href="#" id="contact">Contact</a>
</div>