Javascript 填充使项目在单击添加边框后移动

我正在使用Ul Li制作一个子菜单。 当您显示子菜单时，li显示为无边框

通过一个简单的javascript代码，当您单击li时，我会执行以下操作：

.actif-link {
  border: 1px solid rgb(173, 178, 178);
  padding: 5px;
}

关于JS：

$("ul.filter-ul > li > label > a").on("click", function(event) {
    event.preventDefault();
    $this = $(this);

    if ($this.hasClass("actif-link")) {
        $this.removeClass("actif-link");
    } else {
        $this.addClass("actif-link");           
    }
});

嗯。问题是我的项目是这样排列的：

项目1-项目2-项目3

假设我单击第一项，当我添加我的类（使用边框+内部填充）时，我有以下内容：

项目1——项目2-3

单击的项目将被移动

这真的很麻烦，实际上我找不到解决的办法

我是否应该将每个项目放入具有固定宽度的DIV中，并将边框应用于宽度？没有别的办法吗

---

我提前感谢您在我的请求上花费的时间。

您能否添加

显示：块或
显示：内联块在你的css中

.actif-link {
  border: 1px solid rgb(173, 178, 178);
  padding: 5px; 
}

填充物确实起作用。如果希望填充仅显示在右侧，请添加右侧填充，而不是右侧填充
 如果我理解你的问题，我建议补充

position:relative

并在课堂上
.actif链接
中添加

左：-1px；
右：-1px；
顶部：-1px；
底部：-1px

编辑

好吧，对不起，没有小提琴，这很难想象

因此，我的解决方案如下：

border : 1px solid transparent

这一个解决了所有的问题，因为它是存在的，但它不移动，只是着色

查看并让我知道您是否正在寻找：）

我还重载了您的类以帮助它工作：）
项目正在移动，因为您正在为每边添加一个额外的6像素，而这些像素本来就不存在。第一次渲染项目时，它可能是x像素宽，但单击时，它现在是border+padding+x+padding+border像素宽

一个快速的解决方法是立即设置项目的边框和填充，但要设置
边框颜色：透明
。然后在单击事件中，您可以将颜色更改为您想要的任何颜色。填充物永远不会受到影响，并且边框始终存在，但仅在需要时才可见

编辑：这是你更新的小提琴
你能发布一把小提琴吗？你是对的，这是一把小提琴：它什么也没改变，然后我添加了一把小提琴，以显示当你点击时发生了什么，以及我所说的“点击后项目移动”是什么意思。好的，我更改它。请检查并让我知道：）