Question

我需要使用预定义高度

制作以下代码

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

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

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

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

有人能为此建议任何好的解决方案吗？

提前致谢。

Answer 1

在CSS中给它一个display:inline-block - 应该让它做你想做的事在兼容性方面：IE6 / 7 将使用它，因为怪癖模式暗示：

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

Answer 2

使用

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

唯一的技巧是浏览器支持。 Check if your list of supported browsers handles inline-block here

Answer 3

这是为了显示：所有浏览器中的内联块工作：

足够奇怪，在IE（6/7）中，如果使用“zoom：1”触发hasLayout，然后将显示设置为内联，则表现为内联块。

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

但最简单的解决方案是简单地将.title视为块级元素，并使用相应的标题标记<h1>到<h6>。

Answer 5

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

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

Answer 6

另一种选择当然是使用Javascript（Jquery here）：

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

Answer 7

为什么在这种情况下需要跨度？如果你想要设计高度，你可以使用div吗？您可以尝试使用display: inline的div，虽然这可能会有相同的问题，因为您实际上是在做与span相同的事情。

如何设置SPAN的高度属性

7 个答案: