Question

我有一个使用Materializecss的sidenav，并且需要在边栏上添加一个下拉菜单，但是我无法使其与其他字段保持一致。 <i>和<a>的位置不像sidenav的其他部分居中

我的代码：

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <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>
<script> 
      $(document).ready(function(){
        $('.sidenav').sidenav();
        $('.collapsible').collapsible();
      });
    </script>
<ul style="background-color: #16213B;" id="slide-out" class="sidenav sidenav-fixed">
      <div class="container">
 <p style="font-family: 'Raleway', sans-serif; font-size: 1.2em;" class="center-align white-text"><a style="color: white; font-weight: 900;" href="{% url 'index:index' %}">Mysite</a></p>
      </div>
      </div>
        <li class="bold active"><a href="{% url 'index:index' %}"><i class="mini material-icons" >home</i>Home</a></li>
            <ul class="collapsible collapsible-accordion">
              <li><a class="collapsible-header" ><i class="mini material-icons" >help_outline</i>Documentation</a>
                <div class="collapsible-body">
                  <ul>
                    <li><a href="color.html">Color</a></li>
                    <li><a href="grid.html">Grid</a></li>
                    <li><a href="helpers.html">Helpers</a></li>
                    <li><a href="media-css.html">Media</a></li>
                    <li><a href="pulse.html">Pulse</a></li>
                    <li><a href="sass.html">Sass</a></li>
                    <li><a href="shadow.html">Shadow</a></li>
                    <li><a href="table.html">Table</a></li>
                    <li><a href="css-transitions.html">Transitions</a></li>
                    <li><a href="typography.html">Typography</a></li>
                  </ul>
                </div>
              </li>
            </ul>
      <li ><a href="{% url 'contact:index' %}" class=""><i class="mini material-icons" >mail_outline</i>Contact</a></li>
      <li ><a href="/accounts/login/" class=""><i class="mini material-icons" >logout</i>Go to Dashboard</a></li>


    </ul>

Answer 1

您可以添加其他填充以获得所需的对齐方式

<ul style="padding-left: 16px;" class="collapsible collapsible-accordion">

编辑：这不应影响悬停效果

<a class="collapsible-header" tabindex="0" style="padding-left: 32px"><i class="mini material-icons">help_outline</i>Documentation</a>

Sidenav可折叠不像其他<li>那样居中

1 个答案: