DevTools显示忽略CSS规则：一些帮助调试？

Question

有人可以帮我理解下面的开发者工具中显示的div.fl元素在计算样式部分中有display: block的原因吗？

它显示为块级元素。

但是下面的CSS规则列表显示display: inline ! important是具有最高优先级的规则 - div: block指令具有删除线。

我希望它显示为内联，但我不确定除了在代码中使用div.fl { display: inline ! important; }之外还能做些什么。

我担心我无法链接到代码，但有人甚至可以建议从哪里开始寻找？我不明白block指令的来源。

调试CSS =我最不喜欢的编码部分。

Answer 1

我在屏幕截图中看到float: right声明。浮动元素总是呈现为块;你的元素display: inline如果浮动则无法生成。有关详细信息，请参阅float property的规范。

Answer 2

是浮动还是做某些导致它继承display：block;？有许多CSS属性可以更改显示类型。