如何设置SPAN的高度属性

我需要制作下面的代码拉伸与预定义的高度

<style> .title{ background: url(bg.gif) no-repeat bottom right; height: 25px; } </style> <span class="title">This is title</span> 

但是由于span是内联元素，“height”属性将不起作用。

我尝试使用div来代替，但它会扩展到上层元素的宽度。 宽度应该是灵活的。

任何人都可以提出任何好的解决scheme吗？

提前致谢。

Answer 1

给它一个display:inline-block在CSS中的display:inline-block – 应该让它做你想做的。
在兼容性方面：IE6 / 7 将与此一起工作，如怪癖模式所示：

IE 6/7仅接受具有自然显示的元素的值：内联。

Answer 2

使用

 .title{ display: inline-block; height: 25px; } 

唯一的窍门是浏览器支持。 检查支持的浏览器列表是否在这里处理内联块 。

Answer 3

这是为了在所有浏览器中进行显示：内嵌块的工作：

奇怪的是，在IE（6/7）中，如果用“zoom：1”触发hasLayout，然后将显示设置为内联，则performance为embedded块。

 .inline-block { display: inline-block; zoom: 1; *display: inline; } 

Answer 4

假设你不想让它成为一个块元素，那么你可以尝试：

 .title { display: inline-block; /* which allows you to set the height/width; but this isn't cross-browser, particularly as regards IE < 7 */ line-height: 2em; /* or */ padding-top: 1em; padding-bottom: 1em; } 

但最简单的解决scheme是简单地将.title作为块级元素，并使用适当的标题标签<h1>到<h6> 。

Answer 5

span { display: table-cell; height: (your-height + px); vertical-align: middle; } { display: table-cell; height: (your-height + px); vertical-align: middle; }

对于跨度像表格单元格（或任何其他元素，就此而言），必须指定高度。 我给了一个高度，他们工作得很好 – 但你必须增加高度，让他们做你想做的。

Answer 6

另一个选项当然是使用Javascript（jquery这里）：

 $('.box1,.box2').each(function(){ $(this).height($(this).parent().height()); }) 

Answer 7

为什么在这种情况下需要跨度？ 如果你想风格的高度，你可以只使用一个div？ 你可以尝试一个带display: inline的div display: inline ，虽然这可能会有相同的问题，因为你实际上会做一个跨度相同的事情。