css 如何设置SPAN的height属性

2nc8po8w  于 2022-12-20  发布在  其他
关注(0)|答案(9)|浏览(141)

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

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

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

但由于span是内联元素,“height”属性将不起作用。
我试着用div代替,但是它会扩展到upper元素的宽度。而且宽度应该是灵活的。
对此有什么好的解决方案?

csga3l58

csga3l581#

在CSS中给它一个display:inline-block-这应该让它做你想做的事情。
在兼容性方面:IE6/7处理此问题,如quirks模式所示:
IE 6/7仅接受具有自然显示的元素上的值:内联。

5sxhfpxr

5sxhfpxr2#

用途

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

唯一的技巧是浏览器支持。检查您支持的浏览器列表是否处理这里的内联块。

vi4fp9gy

vi4fp9gy3#

这是为了使display:inline-block在所有浏览器中都能工作:
奇怪的是,在IE(6/7)中,如果您使用“zoom:1”触发hasLayout,然后将显示设置为内联,它的行为就像一个内联块。

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

htrmnn0y4#

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

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

gev0vcfq

gev0vcfq5#

跨距{ display: table-cell; height: (your-height + px); vertical-align: middle; }
要使span像表格单元格一样工作(或任何其他元素),必须指定高度。我已经给span指定了高度,它们工作得很好--但您必须添加高度才能让它们做您想做的事情。

zpqajqem

zpqajqem6#

当然,另一个选择是使用Javascript(这里是Jquery):

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

wqnecbli7#

在某些情况下,您可能希望在不更改显示的情况下调整SPAN高度:内联。
要解决此问题,可以添加上边框和/或下边框属性,根据需要设置所需的宽度参数,并添加透明颜色以隐藏该边框:

.myspan {
   border-top : solid 3px transparent;
   border-bottom : solid 3px transparent;
}
7ivaypg9

7ivaypg98#

.my-span {
    border: solid 1px;
    border-color: gray;
    border-radius: 6px;
    padding-left: 5px;
    padding-right: 5px;
    height: 17px;
    padding-top: 6px;
    display: inline-block;
    line-height: 0px;
}

zbwhf8kr

zbwhf8kr9#

为什么你需要一个span?如果你想设置高度的样式,你可以直接使用div吗?你可以尝试使用display: inline的div,尽管这可能会有同样的问题,因为你实际上是在做与span相同的事情。

相关问题