Align image next to horizontal menu

Question

Hello, I have a small problem, I added a horizontal menu to the html of the site and I wanted to put an image beside (right) but it won’t, I tried by float, align, margin and nothing, I don’t know if you can help me solve the problem, but I thank you all.

HTML code looks like this: In the case "alignright" is just an example

<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>

And the CSS is like this:

.alignright { float:right; }

I believe a lot is missing (or not) to align the image to the right of the menu

Answer 1

Just assign the value table at the display from the menu or include a clearfix inside the menu. Below is an example:

.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>

Run the code snippet to see the result and see if this is exactly what you want.

Answer 2

Putting the image off the list works. See if it’s the way you want it:

.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>

Or try it here: https://jsfiddle.net/fbLgn88o/