如何使菜单上的每个类别之间的线条变细？

Posted 2023-03-13

【中文标题】如何使菜单上的每个类别之间的线条变细？

【英文标题】：How to make line between each category on menu small thin?

【发布时间】：2020-09-30 21:51:41

【问题描述】：

我在 Angular 7 应用程序显示上工作 左侧菜单上的报告类别我面临的每个问题之间的边框底部

下面的类别和类别更大，所以我需要边框小细。

我正在处理stackbliz 示例

我尝试在 css 上更改的内容

.sideNav > li:first-child 
    border-top: 3px #e5e5e5 solid red;
  

我将3px 改为0px，但设计上没有任何变化。

我也尝试在 html 上更改这个

<ul *ngFor="let rep of allReportCategories;let i = index;"  style="margin-top:2px;" 
    class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" 
    data-slide-speed="200">

我将margin-top :2px 更改为0px，但设计上没有任何变化。

那么我怎么做才能使边框变小。

我希望边框后的菜单是下面有红线的小图像。

边框一定要细不要大

更新帖子：

<li class="active open">

当从 html 边框移除上面的行并且左边框也移除时

我需要让边框底部变薄而不是厚

【参考方案1】：

发生这种情况是因为存在 :after，我将其删除并添加了一个 padding-bottom，看起来它有效：

我删除了这些代码并将其添加到 CSS：

/* Removed
.active:after 
    content: "\2212";

*/

/* Added */
.active.open
  padding-bottom:3px;

stackblitz 工作： https://stackblitz.com/edit/create-tym4bg?file=app/app.component.css

希望对你有所帮助！

【讨论】：

这正是我所需要的

如果可能的话，我还需要一些小东西我需要将鼠标悬停在相同大小的单元格

我更新了我给的例子，但是不简单，你重复id="menu"几次，页面上只能有一个id，我把那个id去掉改了到 class="menu"，但我不知道这是否会干扰您的代码中的某些内容，您需要对其进行调整并查看它是否与应用程序的其余部分一起工作，否则您将不得不更改其余部分还有

悬停在错误的位置，它应该在#menu上，所以我切换到一个类并且它保持这种状态：.menu transition: 0.4s; .active, .menu:hover, .menu:hover .accordion 背景颜色: #ccc!important;

它解决了谢谢，但剩下一件事请子类别我需要增加每个单元格的高度，例如 DahsboardParametric - MainCompliance 我需要增加子类别 MainCompliance 的高度，所以如何从子类别中增加每个单元格的高度类别