在下拉列表中将图标与文本对齐

Question

我试图在下拉按钮中将图标对齐到文本的左侧，但我不确定如何做到这一点。

<ul id="dropdown1" class="dropdown-content">
                  <li><a href="#!">Profile</a></li>
                  <li><a href="#!">Receipts</a></li>
                  <li class="divider"></li>
                  <li><a href="#!">Logout</a></li>
                  <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
                  <li><a href="#!"><i class="material-icons">view_module</i>five</a></li>
                  <li><a href="#!"><i class="material-icons">view_module</i>six</a></li>
                </ul>

我也注意到在给出的例子中，它也没有正确对齐https://materializecss.com/dropdown.html

Answer 1

应用

{
  display: flex;
  align-items: center;
}

你的下拉似乎是这样做的：

$('.dropdown-trigger').dropdown();

#dropdown1 li>* {
  display: flex;
  align-items: center;
}
#dropdown1 {
  width: auto !important;
}
/* optional */
#dropdown1 a> i {
  margin-right: 16px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">Profile</a></li>
  <li><a href="#!">Receipts</a></li>
  <li class="divider"></li>
  <li><a href="#!">Logout</a></li>
  <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
  <li><a href="#!"><i class="material-icons">view_module</i>five</a></li>
  <li><a href="#!"><i class="material-icons">view_module</i>six</a></li>
</ul>

Answer 2

尝试覆盖Materialize提供的margin的值

.dropdown-content li > a > i {
    margin: 0 8px 0 0!important;
}

有关详细信息，请参见图片