当向右浮动时,<ul>标签图像列表超出边界</ul>

时间:2014-09-10 10:27:36

标签: javascript html css

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

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

这是我的html代码,我正在使用<ul>标记图片列表来制作动画:

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

当我设置ul id="rotate1"时,图片列表超出了我的页面边框,因为浮动是正确的。当我不id="rotate1"时,即使设置了右浮动,它也会停留在我的页面边框中。

如果ul标签中只有一个图像,则图像会停留在蛀虫中。 如果从样式中删除右侧浮动,则图像将保留在边框中。

下面的图片就是我想要的样子 example image http://i59.tinypic.com/29gilcj.png 这是它使用id="rotate1"的方式 example image http://i61.tinypic.com/2ng5qag.png

编辑:创建一个小提琴: http://jsfiddle.net/naveedshr/7t7csaz0/

1 个答案:

答案 0 :(得分:0)

观察文字问题。它不会根据您的图像进行调整。图像设置为float,文本位于后面。图像将出现在文本前面。因此,对文本使用div并尝试将文本设置为float - left,right to right。

对于图像,我建议使用position: absolute代替浮点数,然后指定左右。

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

我希望它完美无缺!