高度和宽度是否不适用于跨度？

157

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

<span class="product__specfield_8_arrow">&nbsp;</span>

Fiddle

基本上我试图效仿的按钮，使跨度（或东西）看起来像一个按钮旁边的输入因为自动填充生成器在onEnter上生成错误，所以实际上不需要这个字段。以为这是现在的一个快速修复，但显然不是。

谢谢。

来源

2010-03-22 Kyle

你可能也想看看http://stackoverflow.com/questions/2343989/how-to-set-height-property-for-span – 2010-03-22 09:36:13

也检查标准，特别是ht tp：//www.w3.org/TR/CSS2/visudet.html#the-width-property和http://www.w3.org/TR/CSS2/visudet.html#the-height-property，其状态属性“适用于：所有元素但未被替换的行内元素，表行和行组” – outis 2010-03-22 09:56:16

287

跨度是一个内联元素。它没有宽度或高度。

您可以将它变成块级元素，然后它会接受您的维度指令。

span.product__specfield_8_arrow 
{ 
    display: block; /* or inline-block */ 
}

来源

2010-03-22 09:33:41

谢谢，修复它。我试过显示：块之前，但内联块修复它。 – Kyle 2010-03-22 09:38:22

+13

这就是问题所在。如果指定了'display：block'，跨度将停止为一个内联元素，并且一个元素出现在下一行之后。我需要一个内联的元素，但可以是所需的宽度。 – Paul 2013-03-21 17:52:37

span s默认显示为内联，这意味着它们没有高度和宽度。

尝试添加一个display: block到您的范围。

来源

2010-03-22 09:34:52

跨度作为内联元素开始。例如，您可以将其显示属性更改为阻止，并且其高度/宽度属性将开始生效。

来源

2010-03-22 09:35:14

尝试使用div代替span或使用CSS display: block;或display: inline-block; — span是默认不能采取width和height性质的内嵌元素。

来源

2010-03-22 09:36:34 Isaac

div不是跨度的语义替换。 span是一个文本容器，而div是一个布局容器。应用像开发者艺术这样的内联块风格已经提出是正确的答案。 – 2010-03-22 09:43:36

该问题没有提供任何上下文来表明div在语义上本质上不合适。 – Isaac 2010-03-22 09:45:16

实际上，阅读op的标记，它实际上看起来像所讨论的元素，被用来简单地显示背景图像。在这种情况下，div实际上会更合适。 -1从艾萨克的原始评论中删除。 – 2010-03-22 15:15:05

只有当我们使其阻挡元素时，跨度才会占用宽度和高度。

span {display:block;}

来源

2013-05-20 19:43:41

+12

我认为'display：inline-block;'更好 – 151291 2015-08-11 13:26:10

由于每从@保罗评论，如果显示：指定块，跨度停止它出现在下一行之后是一个内联元件和元件。

我来这里是为了找到解决我的跨度高度的问题，我的解决方案我自己

添加overflow:hidden;和keeing它内联将解决只是在IE8怪癖模式测试的问题，从@启发

来源

2014-03-27 13:08:07

我总是看到'overflow：hidden ;'在这方面。 “内容被剪裁，没有滚动条”[MDN说]（https://developer.mozilla.org/en-US/docs/Web/CSS/overflow）。似乎违反直觉。它在这里做什么？ – 2017-02-08 17:10:34

哈米德，我增加了以下和它的工作对我来说：

display: inline-block; overflow: hidden;

来源

2016-06-17 08:05:15 olleh

高度和宽度是否不适用于跨度？

回答

相关问题