解决Materialize下拉列表的问题

Question

供参考：

1. 我正在使用的工具：https://materializecss.com/
2. 我得到的结果：https://imgur.com/a/3s7ekTS
3. 我想要的结果：https://imgur.com/a/8BJExER

我的网页导航栏上有一个下拉菜单。在添加类

之前

.sidenav-trigger

到以下内容：

<li><a href="" data-target="slide-out-settings" class="sidenav-trigger" style="color: black;"><i class="material-icons">settings</i>Settings</a></li>

坐在以下<ul>内部的人：

<ul id='dropdown1' class='dropdown-content'>
  <li>
    <a href="{% url 'FullSearch:Search' %}" style="color: black;"><i class="material-icons">search</i>Search</a>
  </li>
  <li>
    <a href="{% url 'UserProfiles:UserProfile' Username=UserName %}" style="color: black;"><i class="material-icons">person</i>Profile</a>
  </li>
  <li>
    <a href="{% url 'Discover:DiscoverPage' %}" style="color: black;"><i class="material-icons">public</i>Explore</a>
  </li>
  <li>
    <a href="" data-target="slide-out-settings" class="sidenav-trigger" style="color: black;"><i class="material-icons">settings</i>Settings</a>
  </li>
  <li>
    <a href="{% url 'UserLogout:LogoutPage' %}" style="color: black;"><i class="material-icons">arrow_back</i>Logout</a>
  </li>
</ul>

该下拉菜单看起来像预期的那样。

仅删除此类不会起作用，因为我需要它才能具有拉出侧边栏。

如何解决下拉菜单中文本的对齐方式？

Answer 1

尝试将高度设置为自动！重要，如下所示：

<li>
  <a href="" data-target="slide-out-settings" class="sidenav-trigger" style="color: black; height: auto !important;">
    <i class="material-icons">settings</i>
      Settings
  </a>
</li>