1

Olá, estou com um pequeno problema, adicionei um menu horizontal ao html do site e queria colocar uma imagem ao lado (direita) porém não vai, já tentei por float, align, margin e nada, não sei se poderão me ajudar a resolver o problema, mas já agradeço a todos.

Código HTML está assim: No caso "alignright" é só um exemplo

<div id="button">
  <div class="divimg2">
    <ul>
      <li><a href="">Aqui estão a lista do menu</a></li>
      <div class="alignright"><img src "css/images/sidimg.png"></div>
    </ul>
  </div>
</div>

E o CSS está assim:

.alignright { float:right; }

Acredito que esteja faltando muita coisa (ou não) ao CSS pra alinhar a imagem à direita do menu

2 Respostas 2

1

Colocando a imagem fora da lista funciona. Veja se assim está como quer:

.alignright { float:right; }
<div id="button">
    <div class="divimg2">
        <div class="alignright"><img src="css/images/sidimg.png"></div>
        <ul>
            <li><a href="">Aqui estão a lista do menu</a></li>
        </ul>
    </div>
</div>

Ou então experimente aqui: https://jsfiddle.net/fbLgn88o/

2
1

Basta atribuir o valor table ao display do menu ou incluir um clearfix dentro do menu. Segue exemplo abaixo:

.divimg2 {
  background: #eeeeee;
  width: 400px;
  display: table;
}

.divimg2 ul {
  padding: 0 20px;
}

.divimg2 ul li {
  display: inline-block;
}

.divimg2 img {
  float: right; 
}
<!-- Holder.js (apenas para carregar imagem de exemplo) -->
<script src="https://cdn.rawgit.com/imsky/holder/master/holder.js"></script>

<!-- Menu -->
<div id="button">
  <div class="divimg2">
    <ul>
      <img data-src="holder.js/60x24?text=Imagem&theme=industrial">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </div>
</div>

Execute o trecho de código para ver o resultado e ver se é exatamente isso que quer.

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 .