html - 由于不存在负填充，因此可以替代使用

Question

我在视口(viewport)的左侧有一个导航 Pane :

我希望使粉色和棕色的 li 元素变小，但是我看到的唯一选择是使用类似“负填充”的东西(我清楚地知道它不存在)。

这是我的代码:

<div ng-controller="navbarAndFooterController" class="ng-hide" ng-hide="adminNavBool">
        <a href="javascript:void(0);" class="hide" data-activates="side-nav" data-sidenav="left" data-menuwidth="330" data-closeonclick="false">Hide menu</a>
        <ul id="side-nav" class="side-nav fixed">
            <li class="nav-title white center-align">
                <button type="button" ng-click="go('/admin/admin_hub')" class="btn-floating brown darken-2 waves-effect waves-light" tooltipped data-tooltip="Panel de Control - Inicio"><i class="material-icons">home</i></button>
                <button type="button" ng-click="go('/admin_login')" class="btn-floating red darken-2 waves-effect waves-light" tooltipped data-tooltip="Cerrar Sesión - Ir a página principal"><i class="material-icons">power_settings_new</i></button>
            </li>
            <li class="white-text pink darken-2 center-align nav-title">Categorías</li>
            <li><a href="#/admin/actualizar_categoria">Actualizar Categoría</a></li>
            <li><a href="#/admin/nueva_categoria">Nueva Categoría</a></li>
            <li class="white-text pink darken-2 center-align nav-title">Galerías</li>
            <li class="white-text brown darken-2 center-align nav-subtitle">Subcategorías</li>
            <li><a href="#/admin/actualizar_subcategoria">Actualizar Subcategoría</a></li>
            <li><a href="#/admin/nueva_subcategoria">Nueva Subcategoría</a></li>
            <li class="white-text brown darken-2 center-align nav-subtitle">Fotos de Galería</li>
            <li><a href="#/admin/actualizar_foto">Actualizar Foto</a></li>
            <li><a href="#/admin/nueva_foto">Nueva Foto</a></li>
            <li class="white-text pink darken-2 center-align nav-title">Misceláneo</li>
            <li class="white-text brown darken-2 center-align nav-subtitle">Configuración de Usuario</li>
            <li><a href="#/admin/cambiar_contrasena">Cambiar contraseña</a></li>
            <li><a href="#/admin/cambiar_correo">Cambiar correo</a></li>
            <li class="white-text brown darken-2 center-align nav-subtitle">Páginas Editables</li>
            <li><a href="#/admin/actualizar_pagina_de_inicio">Página de Inicio</a></li>
        </ul>
    </div>

相关自定义 CSS:

.nav-title{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
.nav-subtitle{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

(使用 materialize 作为我的前端框架)。有什么想法可以实现吗？

Answer 1

使用 line-height css 规则你不需要负 padding，它会有所帮助。

.li{
   line-height: 20px;//or something else
}