Javascript 在切换另一个元素时，如何使跨度正确对齐？

在本文中，我试图创建一个DIV，当您单击它的标题时，它会展开和折叠。标题位于顶部边框上，几乎像字段表单的图例标记。我希望在长方体折叠时，DIV的上边框保持不变

如果您查看我的JSFIDLE，您将看到它运行得非常好。但是，必须关闭“我的容器”框的边框才能达到此效果。结果，我的标题内容向左移动。它们移动的像素数量与外部DIV的左边框宽度相同

---

我尝试了一些方法来补偿这种变化，因为我希望文本保持在原来的位置，而上边框也保持在原来的位置，但到目前为止运气不好。有人有什么想法吗？

我想如果你把文本放在一个跨度内的内容中。然后将范围设置为显示：无；你的问题将得到解决，而不是按你现在的方式去做

<div id='mdlFcstContent'>
    <span id='mdlFcstContent_span'>
            Lorem ipsum dolor sit amet consectetuer venenatis vitae Nulla fringilla consequat. Wisi magnis volutpat auctor Nulla Vivamus id In elit dictumst mollis. Curabitur auctor consectetuer dui interdum neque Curabitur vel auctor tellus netus. Sed tincidunt condimentum semper Vestibulum sed tellus ridiculus elit In dictum. Turpis lacus pellentesque In ac volutpat mi non nibh vitae laoreet. Elit.
    </span>
</div>

---

编辑：我注意到，这些留下了一个底部边界，不确定这是否是一个交易断路器为您。如果是，则不删除边框，只需将颜色设置为透明

，我认为如果将文本放在跨度中的#mdlFcstContent中。然后将范围设置为显示：无；你的问题将得到解决，而不是按你现在的方式去做

<div id='mdlFcstContent'>
    <span id='mdlFcstContent_span'>
            Lorem ipsum dolor sit amet consectetuer venenatis vitae Nulla fringilla consequat. Wisi magnis volutpat auctor Nulla Vivamus id In elit dictumst mollis. Curabitur auctor consectetuer dui interdum neque Curabitur vel auctor tellus netus. Sed tincidunt condimentum semper Vestibulum sed tellus ridiculus elit In dictum. Turpis lacus pellentesque In ac volutpat mi non nibh vitae laoreet. Elit.
    </span>
</div>

---

编辑：我注意到，这些留下了一个底部边界，不确定这是否是一个交易断路器为您。如果是，只需将颜色设置为透明即可，而不是删除边框。此颜色可使图例保持原样，但会在左右两侧剪切边框：

.boxContainerHidden{
左侧填充：0px；
边框：2倍实心透明；
边框顶部宽度：0px；
}

试试看：

---

这一个使图例保持在其位置，而不会切割边框：

.boxContainerHidden{
高度：1px；
边框：实心#ffffff；
边框宽度：2倍；
边框顶部宽度：0px；
边框底部：0px；
}

---

也试试看：这一款可以让图例保持原样，但会切断左右两侧的边界：

.boxContainerHidden{
左侧填充：0px；
边框：2倍实心透明；
边框顶部宽度：0px；
}

试试看：

---

这一个使图例保持在其位置，而不会切割边框：

.boxContainerHidden{
高度：1px；
边框：实心#ffffff；
边框宽度：2倍；
边框顶部宽度：0px；
边框底部：0px；
}

也试试看：试试这个：

您必须将

display:inline block

添加到span，因为

margin

属性在非块元素上不起作用

---

您必须将

display:inline block

添加到span，因为

margin

属性对非块元素不起作用@insertUserName这里给出了一个很好的答案，但我找到了另一个解决方案，我想我也会发布：

当DIV折叠时，我通过更改boxTitle DIV下跨度的左边框宽度解决了这个问题

---

编辑：我认为这是最实用的解决方案。它允许您轻松地将边框宽度从2像素更改为1像素，而不会出现任何问题。

@insertUserName这里给出了一个很好的答案，但我找到了另一个解决方案，我想我也会发布：

当DIV折叠时，我通过更改boxTitle DIV下跨度的左边框宽度解决了这个问题

---

编辑：我认为这是最实用的解决方案。它允许您轻松地将边框宽度从2像素更改为1像素，而不会出现任何问题。

这就是我的建议。不要删除边框，只需使其透明以保持相同的像素尺寸。确实，您的解决方案会阻止文本移动。但是，我希望顶部边框的大小相同，可以折叠和扩展。现在左边和右边各短两个像素。我想要的是可能的吗？嘿，我已经用一个可能的解决方案更新了我的答案（希望我没弄错）。这次你确实正确地理解了我。很好的解决方案。非常感谢！这就是我要建议的。不要删除边框，只需使其透明以保持相同的像素尺寸。确实，您的解决方案会阻止文本移动。但是，我希望顶部边框的大小相同，可以折叠和扩展。现在左边和右边各短两个像素。我想要的是可能的吗？嘿，我已经用一个可能的解决方案更新了我的答案（希望我没弄错）。这次你确实正确地理解了我。很好的解决方案。非常感谢！我想我没有把我的问题解释清楚。我希望顶部边框显示为相同大小的折叠和展开。现在，由于左边框和右边框的消失，它的每一面都缩短了两个像素。也许我想要的是不可能的。我想我没有解释清楚我的问题。我希望顶部边框显示为相同大小的折叠和展开。现在，由于左边框和右边框的消失，它的每一面都缩短了两个像素。也许我想要的是不可能的。