javascript - 标签图片列表向右浮动时超出边界

Question

我正在尝试使用此 javascript 在图像列表中添加一些动画:

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

这是我使用 <ul> 的 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" 时在 <ul> 上图片列表超出了我页面的边界，因为 float 是正确的。当我不设置 id="rotate1"即使设置了右浮动，它也会停留在我页面的边框中。

如果<ul>中只有一张图片标记然后图像留在蛀虫中。如果从样式中删除右浮动，图像将保留在边框中。

下图是我想要的样子 这就是它使用 id="rotate1" 的方式

编辑:创建了一个 fiddle : http://jsfiddle.net/naveedshr/7t7csaz0/

Answer 1

观察您的文本的问题。它没有根据您的图像进行调整。图像设置为 float ，文本位于后面。图片将出现在文字前面。因此，对文本使用 div 并尝试将文本也设置为 float - 向左，向右浮动。

对于图像，我建议使用 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>

希望它能完美运行!