css - 避免容器的高度变化+如何在末端放置列表项

在jsFiddle here中，我正在进行垂直菜单。当有人将鼠标悬停在图标上时，我希望该菜单的描述变得可见（具有淡入淡出效果）。

问题1：但是在淡入淡出的过渡时间内，描述文字会导致文字换行，从而使过渡变得生涩。有什么解决办法如何解决这个问题？

问题2：我希望“全部扩展”位于底部。但是在HTML中，我需要将它作为开始，因为我在CSS中使用〜。我可以使用CSS / CSS3重新排列吗？

谢谢

码：

#nav {
    margin: 50px;
    width: 50px;

}

#nav ul {
    list-style: none;
    display: inline-block;

}

#nav ul li{
  width:55px;
    font-family: "Lucida Sans";
    font-size: 13px;
    margin-bottom: 1px;

    background: #67BCDB;
    padding: 10px 0 10px 0;


    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

#nav ul li a{
    padding: 10px 50px 10px 0px;
    text-decoration: none;
    color: white;
    text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
   display:none;
   /* overflow-y: scroll;*/
    overflow:auto;
}
#nav:hover {
  width:30px;
}

#nav ul li:hover {
  width:300px;
}

#nav ul li:hover a{
  display:inline;
}
#extendList {
  vertical-align: bottom;
}
#extendList:hover ~ .oList{
  width:300px;
}

#extendList:hover ~ .oList a{
  display:inline;
}

span {
 margin:0 20px;
}

最佳答案

为了避免文字换行，您可以使用white-space和nowrap作为
值;
用transition或animation淡入淡出，您需要一个具有数字值的规则，
可以使用opacity，而不是display或visibility。
要更改顺序，您可以在孩子上使用display:flex和order。 demo pen / demo fiddle