Javascript 活动边框（.showBorder）在移动时居中于文本下方

//获取对两组框的引用
变量编号=document.querySelectorAll（“.clicked”）；
var字母=document.queryselectoral（“.border”）；
//将每个节点列表转换为适当的数组：
numbers=Array.prototype.slice.call（numbers）；
字母=Array.prototype.slice.call（字母）；
//循环遍历所有的数字框
数字。forEach（函数（框，索引）{
//为所有数字框设置单击事件处理程序
addEventListener（“单击”，函数（）{
//删除每个信箱的边框
字母。forEach（功能（方框）{
box.classList.remove（“showBorder”）；
});
//仅将边框应用于单击的元素
var info=document.getElementsByClassName（'box-tip'）[0]；
info.style.left=10+（索引*45）+“px”；
info.style.visibility='visible'；
字母[index].classList.add（“showBorder”）；
});
});
$（文档）.on（“单击“，”.clicked'，函数（）{
$（'.clicked'）.removeClass（'selected'）；
$（this.addClass（'selected'）；
});
.list box li{显示：内联块；列表样式类型：无；填充：1em；背景：红色；}
.列表框{边距：15px自动；填充：0；}
.box套筒li{显示：内联块；列表样式类型：无；填充：1em；背景：红色；}
.box套筒{边距：15px自动；填充：0；}
.showBorder{border:3px黑色虚线；}
.盒子提示{
显示：内联；
保证金：自动；
位置：相对位置；
可见性：隐藏；
}
.数字圆圈{
边界半径：50%；
字体大小：12px；
边框：5px实心#000；
颜色：#fff；
背景：#000；
}
.编号圆形跨度{
文本对齐：居中；
显示：块；
}
li.selected{color:#fff；背景色：#000；}


1
2
3
4
5
6
7
8

适合您衣领尺寸的常规长度
?

a
b
c
d
e
f
g
h
而不是
info.style.left=10+（索引*45）+“px”

 if (index > 2) {
  info.style.left = 10 + ((index - 3) * 45) + 'px';
}
else {
info.style.left = 0 + 'px';
}

这是它的小提琴：
现在更新，效果更好
回答得很好。唯一的缺陷是当我点击返回到数字1时，文本不会返回到起始位置。你知道怎样才能做到吗？没错。我没想到。啊，我明白了。传奇还有一件事-如果字段.marimea在不同的页面上被预选或记住，并且用户在选择该字段的情况下再次登录到该页面，我如何在相关字母上显示边框？首先。marimea只是为了摆脱该类。单击类。尽管用动作命名一个类是非常不明智的（当有数百行javascript时，名为click、blur、submit、keydown等的类只会让您感到困惑），但请随意更改它。有关传递变量的信息，请参见：作为Cookie的快速指南。事实上，在这里可以看到这个问题和答案：