logo标签列表

CSS设置为display:inline，但检查器显示为block。

css
3

我正在尝试将h3标签设置为内联，但无论我在CSS中使用什么规则，检查器中的盒模型都显示display: block。

enter image description here

.widget_title {
    display:inline;
    float:left;
}

任何想法为什么会这样？
这是浏览器提供的h3默认样式。你能在jsfiddle上创建一个代码示例吗？ - Rajesh kannan
不要在 inline 或 inline-block 显示的元素中使用浮动。浮动会将其转换为 block。 - Marcos Pérez Gude
2个回答
4

看起来很简单：您在内联元素上使用float属性，这会强制inline元素成为block元素。

阅读CSS规范以了解更多信息。

关键部分如下：

left 该元素生成一个向左浮动的块级框。 内容在框的右侧流动，从顶部开始 （受“clear”属性的影响）。

很有趣，而且绝对正确。去掉浮点数就可以解决这个问题。 - Lee
1
当您在元素上使用浮动、绝对定位或固定定位时，会将该元素从标准流中强制移除。当元素不在标准流中时，无论其 display css 属性是什么，display:inline 或 inline-block 都没有意义。这就是为什么不在标准流中的元素被视为块级元素的原因。这是一篇有趣的旧文章，讨论浮动布局。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接