我想我明白了。
.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 > <span >+</span><div > <div > These are the contents of this div </div> </div></div>动画化为
100%会包装，因为该框大于可用宽度（100％减去
+以及其后的空白）。
相反，您可以为内部元素设置动画，该元素
100%的总宽度为
.contents。
