使用CSS扩展部分元素的好方法是什么？

Question

我附上了两张图片，显示了我想要达到的效果，以及我目前正在做的方式有什么问题。第一个显示在页面加载上，第二个显示在向下箭头上。

第二部分模糊了第一部分，目前使用负边距。我当前的版本在最左边的框下方有一个不可见元素，其中包含图标，该图标与处理缩进的类具有相同的类。但是在某些屏幕宽度下你会得到下面的效果，你可以看到扩展部分的边框在原始元素的中间运行。

我已经尝试了一些方法来消除故障，但它感觉很像压下气泡 - 要么是造成更严重的问题，要么是不同宽度的相同问题。

我强烈怀疑我这样做是错的，但我还没有想到一种更好的方法来产生相同的效果 - 围绕整个事物边界，来自扩展元素的文本被拉到大约原始摘要文本是。

我可以负担得起使用相当现代的CSS - 我们的观众往往是相当高科技的。如果相关，我正在使用过渡动画来增加高度，所以它需要与之一致。

在：

在：

Answer 1

对您的问题最简单的解决方法是让左侧图标区域与其余区域重叠（使用z-index和position:relative）并将其延长1px（因此它覆盖了所有区域的边框）例）。

使用代码示例更新您的问题，如果上述原则不够，我将使用修复程序更新我的答案。

另一种方法是使用@media查询以经验方式确定边框错位的宽度并调整下拉列表的宽度。

您似乎没有确定的另一个相当重要的方面是该错误是否特定于任何特定的浏览器/设备。

作为旁注，我发现很多类似于你的问题有一个（相当愚蠢）的常见原因：开发人员在不知不觉中改变了浏览器的缩放级别，按 Ctrl + + 或 Ctrl + - ，在90%或110%查看该页面。通过按 Ctrl + 0 确保您以100%的缩放级别进行开发。

我还建议您查看How to ask以获取有关改善问题的提示，以增加获得更好答案的机会。