Javascript <；ul>；向右浮动时，标记图像列表超出边界

我正在尝试使用以下javascript在图像列表中添加一些动画：

<script>
        $(function () {
            $('#rotate1').innerfade({
                animationtype: 'slide',
                speed: 750,
                timeout: 4000,
                type: 'sequence',
                containerheight: 'auto'
            });
        });
</script>

$（函数（）{
$（'#rotate1'）。内部淡入淡出({
animationtype:“幻灯片”，
速度：750，
超时：4000，
类型：'序列'，
集装箱重量：“自动”
});
});

这是我的html代码，我正在使用

标记图像列表为动画添加标记：

<div style="text-align:right; vertical-align: top; float: right; margin-top: 40px; margin-left: 20px; margin-right: 20px">
    <ul id="rotate1" style="list-style: none; width: 100%">
        <li><img src="~/Images/logo11w.png" alt="1" style="border:8px solid #d6d6d6;">first image text</li>
        <li><img src="~/Images/movies1.png" alt="1" style="border:8px solid #d6d6d6;">first image text</li>
    </ul>
</div>

第一图像文本
第一图像文本

当我在

上设置id

id=“rotate1”

时，图像列表会超出我的页面边框，因为float是正确的。当我不设置

id=“rotate1”

时，即使设置了float right，它也会保留在页面的边框中

如果

标签中只有一个图像，则图像将保留在borers中。 若从样式中删除“向右浮动”，则图像将保留在边框中

下图是我想要的样子 这就是它如何使用

id=“rotate1”

编辑：创建小提琴：

---

观察文本中的问题。它不适合你的形象。图像设置为浮动，文本位于后面。图像将出现在文本前面。因此，对文本使用div，并尝试将文本也设置为float-left，right-where-you-want

对于图像，我建议使用

position:absolute

而不是float，然后指定left和right

<div style="text-align:right; vertical-align: top; position:absolute; left:100; right: 100">
<!--All the other code here-->
</div>

---

我希望它能完美地工作

做一把小提琴怎么样？？？你也应该让文字向右浮动。请看一下本教程。你应该能够对你的ul元素使用相同的技术。当我添加图像时，它可以完美地工作，而不使用脚本id。就像在讨论中的image1中一样，图像是使用ul标记添加的，但是当我设置id=rotate时，它会超出页面边界。这里有一个提琴：抱歉，如果有任何不方便的地方，我第一次创建了一个提琴。javascript代码是一个包含文件，我无法上传，所以在javascript部分复制了所有文件。最后一个函数是main。我认为休息是它的定义。我对javascript不太了解。尝试删除id=“rotate1”它将设置在必须删除的主区域。我删除了所有文本，以查看它是否与文本一起调整。但是它和第二张图片一样，没有一个单词出现。所有空白白色页面，图像位置位于屏幕右侧。另外，绝对位置使图像在文本上呈现。不，你搞错了。我说，如果你想浮动，你的文本将以同样的方式出现。你的形象可以出现在你想要的地方。但文本将保持原样。所以，为了对齐第一张图片中显示的文本，我建议将其放在div中。对于图像，我将只看一看。我创建了一个提琴。你能看看这个吗？图像必须位于主（白色）区域。移除id=“rotate1”时得到的