Html 高度和宽度是否不适用于跨度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2491068/
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
Does height and width not apply to span?
提问by Kyle
Total noob question, but here.
总菜鸟问题，但在这里。
CSS
CSS
.product__specfield_8_arrow {
/*background-image:url(../../upload/orng_bg_arrow.png);
background-repeat:no-repeat;*/
background-color:#fc0;
width:50px !important;
height:33px !important;
border: 1px solid #dddddd;
border-left:none;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-bottom-left-radius:0px;
border-top-left-radius:0px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-topleft:0px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-top-left-radius:0px;
margin:0;
padding:2px;
cursor:pointer;
}???
HTML
HTML
<span class="product__specfield_8_arrow"> </span>?
Basically I'm trying to emulate a button, make a span (or something) look like a button next to an input field that actually doesn't need to be one because of an auto fill generator that generates errors onEnter. Thought this'd be a quick fix for now but obviously not.
基本上我试图模拟一个按钮，使一个跨度（或其他东西）看起来像一个输入字段旁边的按钮，实际上不需要是一个按钮，因为自动填充生成器会在 Enter 上产生错误。认为这现在是一个快速解决方案，但显然不是。
Thanks.
谢谢。
回答by
Span is an inline element. It has no width or height.
Span 是一个内联元素。它没有宽度或高度。
You could turn it into a block-level element, then it will accept your dimension directives.
你可以把它变成一个块级元素，然后它会接受你的维度指令。
span.product__specfield_8_arrow
{
display: inline-block; /* or block */
}
回答by Isaac
Try using a divinstead of the spanor using the CSS display: block;or display: inline-block;—spanis by default an inline element which cannot take widthand heightproperties.
尝试使用 adiv而不是span或 使用 CSSdisplay: block;或display: inline-block;—span默认情况下是一个不能接受width和height属性的内联元素。
回答by olleh
Inspired from @Hamed, I added the following and it worked for me:
受@Hamed 的启发，我添加了以下内容并且对我有用：
display: inline-block; overflow: hidden;
回答by Touhid Rahman
Span takes width and height only when we make it block element.
只有当我们使它成为块元素时，跨度才需要宽度和高度。
span {display:block;}
回答by Hamed Ali Khan
As per comment from @Paul, If display: block is specified, span stops to be an inline element and an element after it appears on next line.
根据@Paul 的评论，如果指定了 display: 块，则 span 将不再是内联元素，而是在它出现在下一行之后的元素。
I came here to find solution to my span height problem and I got a solution of my own
我来这里是为了寻找跨度高度问题的解决方案，我得到了自己的解决方案
Adding overflow:hidden;and keeing it inline will solve the problem just tested in IE8 Quirks mode
添加overflow:hidden;并保持内联将解决刚刚在 IE8 Quirks 模式下测试的问题
回答by Edan Maor
spans are by default displayed inline, which means they don't have a height and width.
spans 默认显示为内联，这意味着它们没有高度和宽度。
Try adding a display: blockto your span.
尝试将 a 添加display: block到您的跨度。
回答by Edan Maor
Span starts out as an inline element. You can change its display attribute to block, for instance, and its height/width attributes will start to take effect.
Span 最初是一个内联元素。例如，您可以将其显示属性更改为块，其高度/宽度属性将开始生效。
回答by markling
span {display:block;}also adds a line-break.
span {display:block;}还添加了换行符。
To avoid that, use span {display:inline-block;}and then you can add width and height to the inline element, and you can align it within the block as well:
为了避免这种情况，使用span {display:inline-block;}然后你可以为内联元素添加宽度和高度，你也可以在块内对齐它：
span {
display:inline-block;
width: 5em;
font-weight: normal;
text-align: center
}
