html - 中的 img 不向右浮动

Question

我有一个宽度为 100% 的 div:在那个 div 中，我试图将图像向右浮动。

<div class="card-panel valign-wrapper " 
   style="height: 50px; width: 100%; position: fixed; top: 290px; 
   background: white; z-index:3; ">  
 <h5 class="valign" class="right-align">Beer Menu</h5> 

 <img id = "moreInfo"  style="vertical-align: middle; float: right" src="img/more.png" 
   height="30" width="30"> 
</div>

我一直在尝试使用 chrome inspect element 尝试多种不同的方式将图像 float 到屏幕的右端并将文本留在左侧但不起作用。

这是一张带有周围代码的图片:

Answer 1

一些建议:

1. 使用单独的 CSS 文件。跟踪您的 CSS 会更容易。不同的规则可能会优先，如果您使用单独的文件会更清楚。调试 CSS 问题也会更容易。
2. 我不确定您为什么将啤酒菜单作为“右对齐”类的一部分。您不是将其左对齐并尝试将三个点的图像右对齐吗？这有点令人困惑。
3. 您可以随时尝试“right:0px;” CSS 规则。我无法帮助您编写一些无法自己尝试但可以完美运行的代码，但这可以解决您的问题。你也可以给出“position:absolute;”一枪

只要确保清理您的 CSS，一切都会变得更容易。

编辑:

它不是最好的，但将它添加到你的图像中对我有用:

right: 0px;
top: 10px;
position: absolute;