Question

在jsFiddle中here我正在制作垂直菜单。当有人在图标上盘旋时，我希望该菜单的描述变得可见（具有淡入淡出效果）。

Q1：然而，在淡入淡出的过渡时间期间，描述的文本导致文本换行到换行符，从而使过渡变得不稳定。任何解决方案如何解决这个问题？

Q2：我希望＆＃34;扩展所有＆＃34;位于底部。但是在HTML中，我需要它在开始，因为我在CSS中使用〜。我可以使用CSS / CSS3重新排列吗？

由于

CODE：

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

Answer 1

要避免文字换行，您可以使用：white-space与nowrap匹配值;
要使用transition或animation淡出，您需要一个具有数字值的规则可以使用opacity，不 display ， visibility。
要更改订单，您可以对孩子使用display:flex和order。 demo pen / demo fiddle

避免容器的高度变化+如何在结尾处定位列表项

1 个答案: