由于不存在负填充，所以可以选择使用

Question

在视图的左侧有一个导航窗格：

​

​

我希望使粉红色和棕色的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;
}

(使用物化作为我的前端框架)。知道我怎么能做到这一点吗？

Answer 1

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

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

Answer 2

一种方法是调整列表元素的高度属性。这样，所有的列表元素都具有相同的高度。

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

Answer 3

看起来问题就在其他样式类中：

.white-text? .pink? darken-2? center-align?

这个基本的JSFiddle看上去很好