1

我正在制作一个带有 id 的菜单,menu其中包含以下设置:

display: inline;
height: 200px;

一旦我删除display: inline;,高度再次起作用。

为什么?

4

3 回答 3

5
display: inline;

通常用于指代文本元素;

从 w3c 页面:

[inline] 使元素生成一个或多个内联框。

因此,您必须设置的高度是line-height属性。从 w3c 页面:

在内容由行内元素组成的块容器元素上,'line-height' 指定元素内行框的最小高度。

请注意,您只能控制内联元素的最小高度

于 2012-11-11T00:17:02.323 回答
3

因为规范是这样说的

'height' ... 适用于:所有元素,但未替换的内联元素、表格列和列组

line-height但是,确实适用于inline元素。

于 2012-11-11T00:20:12.380 回答
2

通过使某些内容内联显示,您实际上使其与跨度相同。因此,唯一有效的高度值是 line-height,因为您正在处理内联元素。

要呈现高度值,您需要使用 div 标签或强制现有选项卡像接受高度属性的 div / 对象一样呈现。您可以通过设置 display:block 来做到这一点。

本质上,您可以通过设置 display:inline 将 div 渲染为像 span 一样工作,反之,通过 display:block 将 span 渲染为有效的 div。

Span 标签用于内联样式,例如字体大小、颜色、装饰等。

于 2012-11-11T00:23:48.037 回答