CSS Accordion + inline-block 问题

Question

我的 css 手风琴菜单有问题...

我创建了一个不错的滑块，如下所示： http://jsfiddle.net/LedZep257/hDzyH/1/

但 lis 没有很好地间隔，这意味着某些项目没有完全显示。

当我使用 inline-block 时，间距是正确的，但它会弄乱整个滑块： http://jsfiddle.net/LedZep257/hDzyH/

任何人都可以帮助/有任何想法如何解决这个问题吗？

Answer 1

我认为你不能在不同的措施中设置过渡，我认为“自动”和“％”是不同的措施，你可以只使用一种措施来设置过渡，如果你有太多麻烦和你真的需要完成它，为什么不使用另一种措施，如“em”meaby 来解决它。

例如

.horizontalaccordion>ul>li
{
display: inline-block;
overflow: hidden;
float: left;
margin: 0;
padding: 0;

list-style: none;
width: 8em; /*I was here*/
height: 40px;
background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000));
transition: width 0.6s ease-in-out;
-moz-transition: width 0.6s ease-in-out;
-webkit-transition: width 0.6s ease-in-out;
-o-transition: width 0.6s ease-in-out;
}

.horizontalaccordion>ul>li>h3
{
display: inline-block;
float: left;
margin: 0;
padding: 10px;
padding-left:19px;
padding-right:18px;
height: 19px;
width: 8em; /*I was here*/
border-left: none;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
white-space: nowrap;
filter: progid;
-ms-filter: progid;
}

.horizontalaccordion>ul>li:hover
{
overflow: hidden;
width: 60em; /*I was here, I just set 60em for example*/
}

.horizontalaccordion:hover li
{

    width: 0em; /*I was here*/
}