Sidenav Складной не по центру, как другие <li> - PullRequest
Новая
       3

Sidenav Складной не по центру, как другие <li>

0 голосов
/ 15 апреля 2019

У меня есть sidenav, который использует Materializecss, и мне нужен раскрывающийся список на боковой панели, но я не могу заставить его соответствовать другим моим полям. <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>

Issue

1 Ответ

1 голос
/ 15 апреля 2019

Вы можете добавить дополнительные отступы, чтобы получить желаемое выравнивание 

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

edit: это не должно влиять на эффект наведения 

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