Javascript ul内部一个li显示在白色区域下方？

我有一个JQuery旋转木马，显示得很好，但是我想稍微调整一下它的内容：

<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" style="float: left; list-style: none outside none; position: relative; overflow: auto;" jcarouselindex="1"><img width="331" height="155" src="images/tmp/saying1.png" alt="image description here" title="image description here"><ul class="carousel-caption"><li class="item">Harry Potter and the Deathly Hallows</li><li class="text">Harry Potter video lorem ipsum dolor</li></ul></li>

有什么想法吗？可能是我太蠢了

如图所示：

---

使图像向左浮动（

float:left

）。

很难想象。。。你有没有可能上传一张你得到的和你想要的图片？@Pizzicato：一张旁边有列表的图片？就像这里显示用户的方式一样；一个图标，就在它的名字和代表旁边。不难想象……好吧！起初我以为你有一个CSS文件，没有显示它的内容。不管怎样，当我做这类事情时，我不使用列表。。。下次试试Divs，它更简单、更灵活。此外，列表通常用于列表或菜单。。。可接受性建议。你能试试旋转木马标题z-index:1？你使用firebug（firefox）还是chrome和safari开发者工具？这对这类东西真的很有用！您可以动态更改CSS值，并立即获得预览。到目前为止，它在这类可怕的CSS内容上确实帮助了我！：）浮动：左；在img上似乎没有任何区别。

element.style {
    float: left;
    list-style: none outside none;
    overflow: auto;
}

.jcarousel-skin-brag-small .jcarousel-item-horizontal {
    margin: 0 0 0 63px;
    padding-right: 100px;
}
.jcarousel-skin-brag-small .jcarousel-item {
    height: 235px;
    overflow: hidden;
    width: 331px;
}

.carousel-caption {
    display: inline-block;
    font-size: 11px;
    margin-left: -10px;
    margin-top: 8px;
}