-3

Não estou conseguindo alinhar ícones à direita dos meus menus.
Por algum motivo eles aparecem abaixo de onde deveriam estar.
Segue abaixo o código para entender o problema. E aqui no jsfiddle.
Sou iniciante na área, desculpem se a pergunta parece muito óbvia isso é algo que não estou conseguindo resolver por conta.
Agradeço pela ajuda.

/*====Menu Esquerda====*/

nav#menu_esquerda {
  background-color: #E1F0DB;
  border: 0.5px solid #999999;
  border-radius: 5px;
  font-family: helvetica;
  width: 180px;
  float: left;
  margin-top: 10px;
  height: 1098.8px;
}

nav#menu_esquerda ul {
  padding-left: 2px;
}

nav#menu_esquerda li {
  color: #999999;
  list-style: none;
}

nav#menu_esquerda li:hover {
  background-color: #606060;
}

nav#menu_esquerda a {
  cursor: default;
  color: black;
  text-decoration: none;
  line-height: 1.5;
  display: block;
  padding: 3px;
}

nav#menu_esquerda a:hover {
  color: white;
}

.active {
  background-color: #606060;
}

.active a {
  color: white !important;
}

.preencher {
  background-color: #B9DCBB;
  border: 0.5px solid #999999;
  border-top-right-radius: 5px;
  padding: 3px;
}

.icone_menu {
  float: right;
  max-width: 20px;
  opacity: 0.5;
}

.negrito {
  font-weight: bold;
}
<nav id="menu_esquerda">
  <div class="preencher"><span class="negrito">Menu</span><img src="{% static 'images/menu_icon.png' %}" class="icone_menu"></div>
  <ul>
    <li id="geral"><a href="{% url 'geral' %}" title="Informações Gerais">Geral</a><img src="{% static 'images/geral_icon.png' %}" class="icone_menu"></li>
    <li id="notas"><a href="{% url 'notas' %}" title="Informações sobre notas">Notas</a><img src="{% static 'images/notas_icon.png' %}" class="icone_menu"></li>
    <li id="Frequências"><a href="{% url 'frequencias' %}" title="Informações sobre frequência">Frequência</a><img src="{% static 'images/frequencia_icon.png' %}" class="icone_menu"></li>
  </ul>
</nav>

0

2 Respostas 2

1

Coloca a tag img no link somente. Segue o código abaixo:

/*====Menu Esquerda====*/
nav#menu_esquerda {
    background-color: #E1F0DB;
    border: 0.5px solid #999999;
    border-radius: 5px;
    font-family: helvetica;
    width:180px;
    float: left;
    margin-top: 10px;
    height: 1098.8px;
}
nav#menu_esquerda ul{
    padding-left: 2px;
}
nav#menu_esquerda li{
    color: #999999;
    list-style: none;
}
nav#menu_esquerda li:hover{
    background-color: #606060;
}
nav#menu_esquerda a{
    cursor: default;
    color: black;
    text-decoration: none;
    line-height: 1.5;
    display: block;
  padding: 3px;
}
nav#menu_esquerda a:hover{
    color: white;
}
.active{
    background-color: #606060;
}
.active a{
    color: white !important;
}
.preencher{
    background-color: #B9DCBB;
    border: 0.5px solid #999999;
    border-top-right-radius: 5px;
    padding: 3px;
}
.icone_menu{
    float: right;
    max-width:20px;
  opacity: 0.5;
}
.negrito{
    font-weight:bold;
}
    <nav id="menu_esquerda">
        <div class="preencher"><span class="negrito">Menu</span><img src="{% static 'images/menu_icon.png' %}" class="icone_menu"></div>
        <ul>
            <li id="geral"><a href="{% url 'geral' %}" title="Informações Gerais">Geral<img src="{% static 'images/frequencia_icon.png' %}" class="icone_menu"></a></li>
            <li id="notas"><a href="{% url 'notas' %}" title="Informações sobre notas">Notas<img src="{% static 'images/frequencia_icon.png' %}" class="icone_menu"></a></li>
            <li id="Frequências"><a href="{% url 'frequencias' %}" title="Informações sobre frequência">Frequência<img src="{% static 'images/frequencia_icon.png' %}" class="icone_menu"></a></li>
        </ul>
    </nav>

1
  • Obrigado Rodrigo. Isso resolveu o problema de uma forma bem simples. 18/06/2020 às 14:13
-1

Acredito que seja algo assim que tu queira.

        html,body{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        nav{
            max-width: 250px;
            background-color: yellow;
            padding: 10px;
        }

        .space-between{
            justify-content: space-between;
        }

        .container{
            display: flex;
        }
 

    
<nav>
    <div class="container space-between">
        <p>Menu</p>
        <p>Icon menu</p>
    </div>
    <hr>
    <div class="Menu">
        <div class="container space-between"><a href="">Link aqui</a> <i>icon aqui</i></div>
        <div class="container space-between"><a href="">Link aqui</a> <i>icon aqui</i></div>
        <div class="container space-between"><a href="">Link aqui</a> <i>icon aqui</i></div>
        <div class="container space-between"><a href="">Link aqui</a> <i>icon aqui</i></div>
    </div>
</nav>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .