blocks|key|1297152|text|Span是一个内联元素。它没有宽度或高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1297153|您可以将其转换为块级元素，然后它将接受您的维度指令。|1297154|span.product__specfield_8_arrow
{
++++display:+inline-block;+/*+or+block+*/
}|code-block|syntax|javascript|1297155|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Span is an inline element. It has no width or height.

You could turn it into a block-level element, then it will accept your dimension directives.

<pre><code>span.product__specfield_8_arrow
{
 display: inline-block; /* or block */
}
</code></pre>

blocks|key|1297330|text|尝试使用div而不是span，或者使用CSS+display:+block;或display:+inline-block;-span默认情况下是一个内联元素，不能接受width和height属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1297331|entityMap^0|4|3|A|4|N|F|13|M|1Q|4|2B|5|2H|6|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|G|$]]

Try using a <code>div</code> instead of the <code>span</code> or using the CSS <code>display: block;</code> or <code>display: inline-block;</code>&mdash;<code>span</code> is by default an inline element which cannot take <code>width</code> and <code>height</code> properties.

blocks|key|1082401|text|受@Hamed的启发，我添加了以下内容，并为我工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1082402|display:+inline-block;+overflow:+hidden;+|code-block|syntax|javascript|1082403|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Inspired from @Hamed, I added the following and it worked for me:

<pre><code>display: inline-block; overflow: hidden; 
</code></pre>

blocks|key|1082299|text|Span只有在我们将其设为块元素时才会获取宽度和高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1082300|span+{display:block;}|code-block|syntax|javascript|1082301|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Span takes width and height only when we make it block element.

<pre><code>span {display:block;}
</code></pre>

blocks|key|1297451|text|根据@Paul的注释，如果指定了display:+block，span将停止为内联元素，并在它出现在下一行之后成为元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1297452|我来这里是为了解决我的跨度高度问题，我得到了我自己的解决方案。|1297453|添加overflow:hidden;并将其内联键控将解决刚刚在IE8+Quirks模式下测试的问题|offset|length|style|CODE|1297454|entityMap^0|0|0|2|G|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|N|8|@$F|O|G|P|H|I]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

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.

I came here to find solution to my span height problem and I got a solution of my own

Adding <code>overflow:hidden;</code> and keeing it inline will solve the problem just tested in IE8 Quirks mode

blocks|key|1297211|text|默认情况下，span是内联显示的，这意味着它们没有高度和宽度。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1297212|尝试将display:+block添加到您的范围。|1297213|entityMap^0|6|4|0|3|E|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

<code>span</code>s are by default displayed inline, which means they don't have a height and width.

Try adding a <code>display: block</code> to your span.

blocks|key|1297259|text|Span从一个内联元素开始。例如，您可以将其显示属性更改为block，其高度/宽度属性将开始生效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1297260|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|1082426|text|span+{display:block;}还添加了一个换行符。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1082427|要避免这种情况，请使用span+{display:inline-block;}，然后可以向内联元素添加宽度和高度，也可以在块内对齐它：|1082428|span+{
++++++++display:inline-block;
++++++++width:+5em;
++++++++font-weight:+normal;
++++++++text-align:+center
+++++}|code-block|syntax|javascript|1082429|more+here|1082430|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/css/css_inline-block.asp^0|0|L|0|B|S|0|0|0|9|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<code>span {display:block;}</code> also adds a line-break.

To avoid that, use <code>span {display:inline-block;}</code> and then you can add width and height to the inline element, and you can align it within the block as well:

<pre><code>span {
 display:inline-block;
 width: 5em;
 font-weight: normal;
 text-align: center
 }
</code></pre>

<a href="https://www.w3schools.com/css/css_inline-block.asp" rel="nofollow noreferrer">more here</a>

blocks|key|1082475|text|现在有多种方法可以模仿相同的效果，但可以根据用例进一步定制属性。如上所述，这是可行的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1082476|.product__specfield_8_arrow+{+display:+inline-block+}+|code-block|syntax|javascript|1082477|但同时也|1082478|.product__specfield_8_arrow+{+display:+inline-flex+}+//+flex+container+will+be+inline
.product__specfield_8_arrow+{+display:+inline-grid+}+//+grid+container+will+be+inline
.product__specfield_8_arrow+{+display:+inline-table+}+//+table+will+be+inline-level+table|1082479|此JSFiddle显示了在本例中这些显示属性有多相似。|offset|length|1082480|有关讨论，请参阅this+SO+post。|1082481|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/CSSBurner/mv497eg8/|1|https://stackoverflow.com/questions/24313271/display-property-differences-for-inline-something^0|0|0|0|0|1|8|0|0|8|C|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@$M|15|N|16|1|17]]|A|$]]|$1|O|3|P|5|6|7|18|8|@]|9|@$M|19|N|1A|1|1B]]|A|$]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

There are now multiple ways to mimic this same effect but further tailor the properties based on the use case. As stated above, this works:
<pre><code>.product__specfield_8_arrow { display: inline-block } 
</code></pre>
but also
<pre><code>.product__specfield_8_arrow { display: inline-flex } // flex container will be inline
.product__specfield_8_arrow { display: inline-grid } // grid container will be inline
.product__specfield_8_arrow { display: inline-table } // table will be inline-level table
</code></pre>
This <a href="https://jsfiddle.net/CSSBurner/mv497eg8/" rel="nofollow noreferrer">JSFiddle</a> shows how similar these display properties are in this case.
For a relevant discussion please see <a href="https://stackoverflow.com/questions/24313271/display-property-differences-for-inline-something">this SO post</a>.

Total noob question, but here.

CSS

<pre><code>.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;
}​​​
</code></pre>

HTML

<pre><code>&lt;span class="product__specfield_8_arrow"&gt;&amp;nbsp;&lt;/span&gt;​
</code></pre>

<a href="http://jsfiddle.net/fwbxU/" rel="noreferrer">Fiddle</a>

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.

Thanks.

Does height and width not apply to span?

完全是个菜鸟问题，但是这里。CSS.product__specfield_8_arrow {    /*background-image:url(../../upload/orng_bg_arrow.png);    background-repeat:no-repeat;*/    background-color:#fc0;    width:50px !important;    heigh

问高度和宽度不适用于span吗？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问高度和宽度不适用于span吗？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问高度和宽度不适用于span吗？
EN