html - 正确定位 2 个 CSS 列表

Question

我正在创建一个水平元素列表，元素名称在上面，它们的图像在下面。像这样http://i.imgur.com/b317ody.png

大部分工作已经完成并且已经在运行，但我遇到了两个问题。

1- 由于我创建了两个列表，一个用于名称和我无法定位的图像它们正确地位于彼此之下。

2- 包含图像的列表未正确启动。

这是一个有效的 JsFiddler http://jsfiddle.net/P3SJ3/1/ .

<ul id = "top" class="horizontal-slide ">
    <li class="span2 animate-repeat borderlist" ng-repeat="item in items | filter:search" > <a href="#" class="thumbnail">
        <div class="text-block vertical-text ">{{item.name}}</div>
    </a></li>
</ul>

<ul id="bottom" class="horizontal-slide ">
<li class="span2 animate-repeat  borderlist image-block " ng-repeat="item in items | filter:search" >
    <ul class="  ">
    <li class=" " ng-repeat="url in item.urls | filter:search" > 
                <a href="#" class="thumbnail">
              <img src="{{url.url}}" alt="" />
            </a>
    </li>
  </ul>

ul.horizontal-slide {
margin: 0;
padding: 0;
width: 100%;
white-space: nowrap;
overflow-x: auto;

}

ul.horizontal-slide li[class*="span"] {
    display: inline-block;
    float: none;
}

ul.horizontal-slide li[class*="span"]:first-child {
    margin-left: 0;
}

.text-block {
    width:30px;
    height:100px;
    margin-top:10px;
    margin-left : 20px;
}

.image-block {
    width:50px;
}

.image-block ul {
    list-style-type: none;     
}

.image-block ul li {
    float:right;   
}

.borderlist {
    list-style-position:inside;
    border: 1px solid red;
}

Answer 1

在 ul.horizo​​ntal-slide li[class*="span"] 中添加 vertical-align:top 如下所述:

ul.horizontal-slide li[class*="span"] {
    display: inline-block;
    float: none;
    vertical-align:top;
}

参见 JSFiddle这里

更新:

您还必须管理 TOP ul 的内部 css。查看更新 JSFiddle