如何为 SPAN 设置高度属性

Posted 2023-03-06

【中文标题】如何为 SPAN 设置高度属性

【英文标题】：How to set height property for SPAN

【发布时间】：2011-01-21 14:05:52

【问题描述】：

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

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

</style>

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

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

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

谁能为此提出任何好的解决方案？

提前致谢。

【问题讨论】：

您应该使用标题标签（h1、h2、h3、...）作为标题。它在语义上更正确。

是的，你说得对。感谢大家的帮助。这是我最后的CSS。它对我很有用：

【参考方案1】：

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

【讨论】：

或者，完全忽略我的胡言乱语，使用 henasraf 的回答 :)

投反对票 cmets 只会阻止那些想要合法贡献的人。停下来！只是提供一些建设性的反馈，或者可能更重要的是，你对此事的看法。

【参考方案2】：

在 CSS 中给它一个 display:inline-block - 这应该让它做你想做的事。 在兼容性方面：IE6/7 将与此兼容，正如 quirks 模式所暗示的那样：

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

【讨论】：

不管怎样，IE7 不支持inline-block。

Np。 @Scott：我在 W3 上看不到——这就是他们所说的：Note: No versions of Internet Explorer (including IE8) support the property values "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", or "table-row-group".

@henasraf - @Scott 是正确的，我也不能使用它，因为要快速使用它：quirksmode.org/css/display.html

引用：IE 6/7 accepts the value only on elements with a natural display: inline.

啊哈，我想如果应用到span 那么它会起作用。谢谢你的信息，henasraf。

【参考方案3】：

使用

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

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

【参考方案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>。

【参考方案5】：

这是为了让 display:inline-block 在所有浏览器中工作：

奇怪的是，在 IE (6/7) 中，如果您使用 "zoom:1" 触发 hasLayout，然后将显示设置为内联，它的行为就像一个内联块。

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

【参考方案6】：

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

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

【参考方案7】：

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

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

【参考方案8】：

在某些情况下，您可能希望在不更改显示的情况下调整 SPAN 高度：内联。

要解决这个问题，您可以添加一个顶部和/或底部边框属性，根据您的需要设置所需的宽度参数，并使用透明颜色来隐藏该边框：

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