我使用 Materialize CSS 框架创建了以下可折叠的手风琴。
我尝试将 Chevron 图标放置在可折叠标题的末尾。我已经应用了 right CSS 类来使图标浮动到可折叠标题的右侧,但这并不能使它完全移到可折叠标题的右侧最边缘。
如何最好地将 Chevron 图标移动到可折叠标题的右侧最末端位置?
我尝试将 Chevron 图标放置在可折叠标题的末尾。我已经应用了 right CSS 类来使图标浮动到可折叠标题的右侧,但这并不能使它完全移到可折叠标题的右侧最边缘。
如何最好地将 Chevron 图标移动到可折叠标题的右侧最末端位置?
$('.collapsible').collapsible();
.collapsible li.active i {
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
.rotate {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
transition: all .3s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<ul class="collapsible">
<li>
<div class="collapsible-header">
First
<i class="material-icons rotate right">expand_more</i></div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header">Second
<i class="material-icons rotate right">expand_more</i>
</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header">Third
<i class="material-icons rotate right">expand_more</i></div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
</ul>