我正在创建一个水平元素列表,元素名称在上面,它们的图像在下面。 像这样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;
}
最佳答案
在 ul.horizontal-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
关于html - 正确定位 2 个 CSS 列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24283667/