Html 内联列表被悬停效果打断

我有一个非常简单的

图像，当鼠标悬停在上面时，这些图像将显示人名和一些简短的信息。我对

的意图是使其水平，这是在添加悬停特性（

）之前

我的问题是: 1.为什么

不再是水平的，我该如何纠正？ 2.无论选择了哪个

，如何使悬停信息显示在

下方居中的同一位置

我已经使用了帮助，但它没有解决我的具体问题

（如果可能的话，我更愿意严格使用HTML/CSS。）

像这样的？ 将li置于

位置：相对

然后将figcaption设置为
位置：绝对
类似的位置？
将li置于
位置：相对

然后将figcaption置于
位置：绝对

将
figcaption
显示：无：
更改为
显示：块

并在
ul中删除。设计师li:hover figcaption
显示：块

CSS:

这是

将
figcaption
显示：无：
更改为
显示：块

并在
ul中删除。设计师li:hover figcaption
显示：块

CSS:

或者试试这个！只需将
位置：绝对
放在
ul中。造型师李：悬停figcaption
和
显示：内联块
放在
ul中。造型师李
参见此处

或者试试这个！只需将
位置：绝对
放在
ul中。造型师李：悬停figcaption
和
显示：内联块
放在
ul中。造型师李
参见此处

在我看来不错，尽管OP没有指定最终结果应该是什么。小提琴似乎完全按照我的意愿工作，但是如果你看看现场的话[…列表仍然是垂直的。你知道为什么吗？对我来说很好，尽管OP没有明确说明最终结果应该是什么。小提琴似乎完全按照我的愿望工作，但是如果你看看现场网站[…列表仍然是垂直的。你知道为什么吗？
ul.stylists {
    margin: 0 auto;
    padding-left: 10px;
    width: 582px;
}

ul.stylists li {
    display: inline;
    padding-right: 20px;
}

ul.stylists li:last-child {
    padding-right: none;
}

figcaption {
   display: none;
   opacity: 0;
    -webkit-transition: opacity 0.3s ease-out;  
    -moz-transition: opacity 0.3s ease-out;  
    -ms-transition: opacity 0.3s ease-out;  
    -o-transition: opacity 0.3s ease-out;  
      transition: opacity 0.3s ease-out;
}

ul.stylists li:hover figcaption {
   display: block;
   opacity: 1;
}

figcaption {
    display: inline-block;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-out;  
    -moz-transition: opacity 0.3s ease-out;  
    -ms-transition: opacity 0.3s ease-out;  
    -o-transition: opacity 0.3s ease-out;  
    transition: opacity 0.3s ease-out;
}

ul.stylists li:hover figcaption {
   opacity: 1;
}