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

Question

我有一个非常简单的 <ul>由将在悬停时显示人名和简短信息的图像组成。我对 <ul> 的意图是为了它是水平的，这是在添加悬停方面(<figcaption>)之前。

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

我用过 this article from 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 设为 position: relative 然后将 figcaption 设为 position: absolute