Html 正确定位2个CSS列表

我正在创建一个水平项目列表，项目名称在上面，它们的图像在下面。 像这样

大部分的工作已经完成，而且已经开始工作了，但是我有两个问题

1-因为我创建了两个列表，一个是名称，另一个是我无法定位的图像 它们正确地在彼此下面

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

这是一个正在工作的JsFiddler

---

在ul.horizontal-slide li[class*=“span”]中添加

垂直对齐：顶部
，如下所述：

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

看这里

更新：

此外，您还必须管理TOPul的内部css。看一看更新
伙计，你想让小提琴更人性化一点……把它简化成一个有限的例子！谢谢，这修正了数字2。滚动到小提琴的末尾，你会注意到第一个列表在第二个列表之前完成。它们没有完全同步。@NarJhanam:看看我的最新答案和小提琴。别忘了把它标为答案。祝您度过愉快的一天非常感谢，这确实做到了，但请修复指向此的JSFIDLE链接。
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"] {
    display: inline-block;
    float: none;
    vertical-align:top;
}