如何在网页上找到最宽的元素？

Question

当在现有的固定宽度网页设计上尝试使其响应时，我在测试过程中缩小视图/屏幕尺寸时发现，有时会出现一个水平滚动条，表明网站上的某些元素或相邻元素的组合的组合宽度高于视图的宽度。我需要确定那个元素是什么，这样我才能弄清楚该怎么做。

我的问题是，确定页面上最宽的元素的最佳方法是什么 - 即，它不会进一步缩小的原因？使用浏览器内置的检查器工具，这只是任何长页面上的猜谜游戏，而且效率很低。

感谢您的任何建议。

Answer 1

我没有看到任何特殊的工具，但在我的工作中我使用以下方式：

在 Web 检查器中，您选择一些 html 节点并为该节点应用 overflow: hidden，如果水平滚动条被隐藏，哇 :) 所以最宽的元素在该节点中，您删除当前节点 overflow: hidden 并选择当前节点内的下一个节点并再次应用 overflow: hidden 等

Answer 2

在我的案例中，帮助将“di”写入某个或另一个节点的样式。在 detools 弹出列表“显示：”选项之后，只需滚动它们即可。想要的宽度立即显示。