Html 如何为 SPAN 设置高度属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2343989/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set height property for SPAN
提问by Kelvin
I need to make following code stretchable with predefined height
我需要使用预定义的高度使以下代码可拉伸
<style>
.title{
background: url(bg.gif) no-repeat bottom right;
height: 25px;
}
</style>
<span class="title">This is title</span>
But since spanis inline element, "height" property won't work.
但由于span是内联元素，“height”属性将不起作用。
I tried using divinstead, but it will expand up to the width of upper element. And the width should be flexible.
我尝试使用div代替，但它会扩展到上元素的宽度。并且宽度应该是灵活的。
Can anyone suggest any good solution for this?
任何人都可以为此提出任何好的解决方案吗？
Thanks in advance.
提前致谢。
回答by casraf
Give it a display:inline-blockin CSS - that should let it do what you want.
In terms of compatibility: IE6/7 willwork with this, as quirks mode suggests:
display:inline-block在 CSS 中给它一个- 这应该让它做你想做的事。
在兼容性方面：IE6/7将与此兼容，正如 quirks 模式所建议的那样：
IE 6/7 accepts the value only on elements with a natural display: inline.
IE 6/7 仅接受具有自然显示的元素的值：内联。
回答by Jon Galloway
Use
用
.title{
display: inline-block;
height: 25px;
}
The only trick is browser support. Check if your list of supported browsers handles inline-block here.
唯一的技巧是浏览器支持。检查您支持的浏览器列表是否在此处处理内联块。
回答by I.devries
this is to make display:inline-block work in all browsers:
这是为了使 display:inline-block 在所有浏览器中工作：
Quirkly enough, in IE (6/7) , if you trigger hasLayout with "zoom:1" and then set the display to inline, it behaves as an inline block.
奇怪的是，在 IE (6/7) 中，如果您使用 "zoom:1" 触发 hasLayout，然后将显示设置为内联，则它表现为内联块。
.inline-block {
display: inline-block;
zoom: 1;
*display: inline;
}
回答by David says reinstate Monica
Assuming you don't want to make it a block element, then you might try:
假设您不想使其成为块元素，那么您可以尝试：
.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;
}
But the easiest solution is to simply treat the .titleas a block-level element, and using the appropriate heading tags <h1>through <h6>.
但最简单的解决方法是简单地将.title作为一个块级元素，并使用相应的标题标签<h1>通过<h6>。
回答by mike s
span { display: table-cell; height: (your-height + px); vertical-align: middle; }
跨度 { display: table-cell; height: (your-height + px); vertical-align: middle; }
For spans to work like a table-cell (or any other element, for that matter), height must be specified. I've given spans a height, and they work just fine--but you must add height to get them to do what you want.
要使跨度像表格单元格（或任何其他元素，就此而言）一样工作，必须指定高度。我给了 spans 一个高度，它们工作得很好——但是你必须增加高度才能让它们做你想做的事。
回答by Ukuser32
Another option of course is to use Javascript (Jquery here):
当然，另一种选择是使用 Javascript（这里是 Jquery）：
$('.box1,.box2').each(function(){
$(this).height($(this).parent().height());
})
回答by Seth Petry-Johnson
Why do you need a span in this case? If you want to style the height could you just use a div? You might try a div with display: inline, although that might have the same issue since you'd in effect be doing the same thing as a span.
为什么在这种情况下需要跨度？如果你想设置高度的样式，你可以使用 div 吗？您可以尝试使用 div display: inline，尽管这可能会遇到相同的问题，因为您实际上正在做与跨度相同的事情。
