css 如何设置SPAN的height属性

2nc8po8w 于 2022-12-20 发布在其他

关注(0)|答案(9)|浏览(142)

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

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

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

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

css

来源：https://stackoverflow.com/questions/2343989/how-to-set-height-property-for-span

9条答案

按热度按时间

csga3l581#

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

赞(0）回复(0）举报 2022-12-20

5sxhfpxr2#

用途

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

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

赞(0）回复(0）举报 2022-12-20

vi4fp9gy3#

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

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

赞(0）回复(0）举报 2022-12-20

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

赞(0）回复(0）举报 2022-12-20

gev0vcfq5#

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

赞(0）回复(0）举报 2022-12-20

zpqajqem6#

当然，另一个选择是使用Javascript（这里是Jquery）：

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

赞(0）回复(0）举报 2022-12-20

wqnecbli7#

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

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

赞(0）回复(0）举报 2022-12-20

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