题
我需要下面的代码伸缩性与预定高度
<style>
.title{
background: url(bg.gif) no-repeat bottom right;
height: 25px;
}
</style>
<span class="title">This is title</span>
但自的跨度强>是内嵌元件, “高度” 属性将不起作用。
我试图使用的 DIV 强>代替,但它会扩展到上部元件的宽度。和宽度应该是灵活的。
任何人都可以提出任何好的解决这个?
预先感谢。
解决方案
给它在CSS中display:inline-block
- 这应该让他做你想要的结果。
在兼容性方面:IE6 / 7的将强>与此工作,因为怪异模式表明:
IE 6/7只接受在具有自然的显示元件的值:内嵌
其他提示
这是使显示:内联块工作在所有浏览器:
Quirkly足够,在IE(6/7),如果触发hasLayout的与“缩小:1”。然后将显示器设置为内联的,其表现为内联块
.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?你可以尝试用display: inline
一个div,虽然可能有同样的问题,因为你实际上会做同样的事情,作为一个跨度。
不隶属于 StackOverflow