标签的标题出现在垂直手风琴的右侧

Question

发生了什么事？：手风琴正常工作，但标签显示在手风琴的右侧。

的jQuery

$(document).ready(function(){
    $(".accordion .title").click(function(){
        $(this).next(".accordion .details").slideToggle(500)
    }).next().hide();
});  

---

CSS ： Hoverbox

.hoverbox
{
    cursor: default;
    list-style: none;
} .hoverbox a {
    padding-top: 5px;
    cursor: default;
    text-decoration: none;
    color: black;
} .hoverbox a .preview {
    display: none;
} .hoverbox a:hover .preview {
    display: block;
    position: absolute;
    top: -33px;
    left: -45px;
    z-index: 1;
} .hoverbox img {
    vertical-align: top;
    height: 125px;
} .hoverbox li {
    display: inline;
    float: left;
    margin: 3px;
    padding: 5px;
    position: relative;
    text-align: right;
    text-decoration: none;
} .hoverbox .preview {
    border-color: #000;
    height: 300px;
} .gallery {
    width: 100%;
}

---

HTML ：一张图片的示例。

<div class="accordion">
    <div class="title"><h2></h2></div>
    <ul class="details">
    <div class="gallery">
    <ul class="hoverbox">
        <li>
        <a href="#">
            <img src="pictures/1.jpg" class="thumbnail"/>
            <img src="pictures/1.jpg" class="preview"/></br>
            Compass
        </a>
        </li>
    </ul>
    </div>
    </ul>
</div>

首先，让我们从一个刚加载的手风琴开始吧。

点击“Glass Windows”后，就会发生这种情况。

我做了什么：在过去的四五天里，我花了很多时间重新定位<div>标签，确保我的代码正确并且涉及到CSS（特别是制作）确保文本没有奇怪地对齐，或者有关于图像如何显示的愚蠢行为）。我知道，不是很具体。我为这个不那么简短的问题道歉。

---

更新的

我试图使用Dexter的建议，但我仍然遇到文本对齐问题。

点击第1节...

第2节......

如前所述，每个部分应该在彼此之下。 视频部分与手风琴分开，主页是页面底部导航列表的一部分（用作页脚）。

我已经明白，对于其他一些与手风琴无关的内容，这可能是我的CSS的问题。由于我不知道问题是什么，我将上传整个CSS（与手风琴CSS的长度大致相同）......当然，那是'好的'。

Answer 1

那么，这是你想要实现的目标吗？

请参阅此处的小提琴：http://jsfiddle.net/GRATx/

编辑：

小提琴中的代码[使用hoverbox功能更新]：http://jsfiddle.net/GRATx/1/