如何在Materialize CSS中让图标右浮？折叠头部图标右移失败

嘿，我懂你遇到的困扰——用float:right想把图标弄到Collapsible头部右侧，结果完全没反应对吧？其实这是因为Materialize的.collapsible-header默认用了Flex布局，float这类传统布局属性在Flex容器的子元素里根本不生效，得换用Flex相关的属性来调整位置~

原因分析 #

Materialize框架里的.collapsible-header默认样式包含display: flex，这意味着它的子元素会遵循Flex布局规则，float这类针对块级布局的属性在这里就失效啦。

两种可行的解决方案 #

方案1：给头部添加Flex对齐样式 #

直接给.collapsible-header设置justify-content: space-between，这样头部里的文本和图标会自动分别靠向左右两端：

先补全你的HTML结构示例：

<ul class="collapsible">
  <li>
    <div class="collapsible-header">
      <span>Course Title</span>
      <i class="material-icons">expand_more</i>
    </div>
    <div class="collapsible-body">
      <p>Course content goes here...</p>
    </div>
  </li>
</ul>

然后添加CSS样式（可以放在<style>标签里或者外部样式文件）：

.collapsible-header {
  justify-content: space-between;
  align-items: center; /* 确保元素垂直居中，可选但体验更好 */
}

如果不想全局修改所有Collapsible头部，也可以自定义一个类：

<div class="collapsible-header right-icon-header">
  <span>Course Title</span>
  <i class="material-icons">expand_more</i>
</div>

.right-icon-header {
  justify-content: space-between;
  align-items: center;
}

方案2：给图标设置margin-left: auto #

这种方式更灵活，只需要给图标元素单独加样式，就能让它自动被推到Flex容器的最右侧：

<div class="collapsible-header">
  <span>Course Title</span>
  <i class="material-icons" style="margin-left: auto;">expand_more</i>
</div>

这样不用修改头部的整体样式，直接针对图标调整就行，适合只需要个别Collapsible头部图标右对齐的场景。

最后别忘了确保你正确引入了Materialize的CSS文件哦，要是样式没加载全，布局也可能出问题~

内容的提问来源于stack exchange，提问作者Elon Musk