如何设置SPAN的height属性

我需要使以下代码可扩展到预定义的高度

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

<span class="title">This is title</span>

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

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

有人可以为此提出任何好的解决方案吗？

提前致谢。

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

IE 6/7仅在自然显示的元素（内联）上接受该值。

使用

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

唯一的技巧是浏览器支持。在此处检查支持的浏览器列表是否处理inline-block。

这是为了使display：inline-block在所有浏览器中都能正常工作：

足够奇怪的是，在IE（6/7）中，如果使用“ zoom：1”触发hasLayout，然后将显示设置为嵌入式，则它的行为就像是嵌入式块。

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

假设您不想使其成为一个块元素，那么您可以尝试：

.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;
}

但最简单的解决方法是简单地将.title作为一个块级元素，并使用相应的标题标签<h1>通过<h6>。

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

为了使跨度像表格单元格（或其他任何元素）那样工作，必须指定高度。我给了跨度一个高度，它们工作得很好-但您必须增加高度才能让它们做您想要的事情。

当然，另一个选择是使用Javascript（此处为Jquery）：

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

为什么在这种情况下需要跨度？如果要设置高度样式，可以只使用div吗？您可以尝试使用div display: inline，尽管实际上可能会发生与span相同的问题，但这可能会有相同的问题。