减少项目之间的间距 - 多选下拉菜单答案

【问题标题】：Reduce spacing between items - multi select dropdown减少项目之间的间距 - 多选下拉菜单
【发布时间】：2017-08-28 15:01:03
【问题描述】：

我正在使用https://github.com/softsimon/angular-2-dropdown-multiselect 在角度 4 中创建多选下拉菜单。

我想更改下拉菜单中显示的项目的填充。从开发者工具来看，padding 似乎设置为 3px 和 20px

.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

有没有一种方法可以在项目上应用自定义 CSS 以摆脱填充。如果我在我的 CSS 中覆盖 'dropdown-menu>li>a'，那么它也会影响其他元素

.dropdown-menu>li>a {
    display: block;
    padding: 1px 5px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

以黑色突出显示的区域是我想去掉的白色区域。

【问题讨论】：

我真的不明白问题出在哪里......给你的基本元素一个自定义类（或id）并从那里应用样式......
在更改填充时，我没有看到其他元素有任何问题。你能澄清你想改变什么元素的填充吗？还有你使用的是什么下拉样式？

标签： css angular

【解决方案1】：

您必须覆盖样式，但请确保将其包装在另一个类中，以便仅在该类中应用它。

例如： HTML：

<div class="customDropdown">
 //Use drop down here
</div>

CSS：

    .customDropdown .dropdown-menu>li>a {
        display: block;
        padding: 1px 5px;
        clear: both;
        font-weight: 400;
        line-height: 1.42857143;
        color: #333;
        white-space: nowrap;
     }

【讨论】：

是的，我错过了语法。现在编辑答案。前一个是使用 Sass 语法。