我想我明白了。
.wrapper {
background:#DDD;
display:inline-block;
padding: 10px;
height: 20px;
width:auto;
}
.label {
display: inline-block;
width: 1em;
}
.contents, .contents .inner {
display:inline-block;
}
.contents {
white-space:Nowrap;
margin-left: -1em;
padding-left: 1em;
}
.contents .inner {
background:#c3c;
width:0%;
overflow:hidden;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
.wrapper:hover .contents .inner {
width:100%;
}
<div class="wrapper">
<span class="label">+</span><div class="contents">
<div class="inner">
These are the contents of this div
</div>
</div>
</div>
动画化为100%会包装，因为该框大于可用宽度（100％减去+以及其后的空白）。
相反，您可以为内部元素设置动画，该元素100%的总宽度为.contents。
602392714
清零编程群