logo标签列表

将图标放在手风琴的右侧

htmlcssmaterialize
3
我使用 Materialize CSS 框架创建了以下可折叠的手风琴。
我尝试将 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>

5个回答
3
作为您的
已经有了"display: flex"，您可以添加"justify-content: space-between"。这样会使第一个项目与主开始边缘对齐，而最后一个项目与主结束边缘对齐。justify-content。 

$('.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;
}

.collapsible-header {
  justify-content: space-between;
}
<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>

1
很好的回答 :tup: - Anees Hikmat Abu Hmiad
1
使它绝对化
.collapsible-header i {

    position: absolute;
    right: 0px;
}


$('.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;
}

.collapsible-header i {
    
    position: absolute;
    right: 0px;
}
<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>

1

您还可以使用row和col（网格结构）来实现以下效果：

$('.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;
}

.collapsible-header.row {
  margin-bottom: 0;
}
<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 row">
      
      <div class="col s11">First</div>
      <i class="col s1 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 row"><div class="col s11">Second</div>
      <i class="col s1 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 row"><div class="col s11">Third</div>
      <i class="col s1 material-icons rotate right">expand_more</i></div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

0
将 'collapsible-header' 类中添加 "justify-content: space-between;"。 

 $('.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;
}
.collapsible-header {
  justify-content: space-between;
}
<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>

1
我认为这就像@ksav的答案一样？ - Anees Hikmat Abu Hmiad
1
是的，我同时也添加了答案。之后他进行了一些编辑。 - Akshaya K T
0
我刚刚给可折叠标题添加了"display: block"，效果很好...
.collapsible-header{
    display: block;
}

只需为材料图标添加正确的类，它就可以工作了。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接