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;
}

（使用materialize作为我的前端框架）。我有什么想法可以做到这一点？

Answer 1

使用line-height css规则，您不需要否定padding，这会有所帮助。

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

Answer 2

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

.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?

This basic JSFiddle看起来很好

替代使用，因为不存在负填充

3 个答案: