将图标与下拉菜单中的文本对齐

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

尝试像

一样重写Materialize提供的margin的值

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

查看图片以获取更多详细信息

Answer 2

正在申请

{
  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>