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.horizontal-slide li [class * =＆＃34; span＆＃34;] 中添加vertical-align:top，如下所述：

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

请参阅JSFiddle此处

更新：

此外，你必须管理 TOP ul的css内部。请查看更新JSFiddle

正确定位2个CSS列表

1 个答案: