html - 被悬停效果破坏的内联列表

Question

我有一个非常简单<ul>的由图像组成的图像，当鼠标悬停在上面时会显示人名和一些简短的信息。我的意图<ul>是让它是水平的，这是在添加悬停方面（<figcaption>）之前。

我的问题：1.为什么<ul>不再水平，我该如何纠正？<ul>2.无论选择哪个，如何让悬停信息显示在同一位置的下方居中<li>？

我使用CSS Tricks 中的这篇文章寻求帮助，但它并没有解决我的具体问题。

（如果可能的话，我宁愿严格遵守 HTML/CSS。）

jsfiddle

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;
}

Answer 1

像这样的东西？http://jsfiddle.net/7McEX/7/ 把 li 变成 aposition: relative 然后把 figcaption 变成position: absolute

Answer 2

或者试试这个！只需放入position:absolute并ul.stylists li:hover figcaption在display:inline-block此处ul.stylists li查看...

http://jsfiddle.net/bgajjar1/7McEX/13/

Answer 3

这里是演示

改变到figcaption_display: none:display: block;

并ul.stylists li:hover figcaption在display: block;

CSS：

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;
}