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

【问题标题】：Does height and width not apply to span?高度和宽度是否不适用于跨度？
【发布时间】：2011-01-30 06:27:35
【问题描述】：

总菜鸟问题，但在这里。

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

基本上我正在尝试模拟一个按钮，使跨度（或其他东西）看起来像一个输入字段旁边的按钮，实际上不需要是一个按钮，因为自动填充生成器会在输入时生成错误。认为这现在是一个快速解决方案，但显然不是。

谢谢。

【问题讨论】：

您可能还想查看stackoverflow.com/questions/2343989/…
还要检查标准，特别是 w3.org/TR/CSS2/visudet.html#the-width-property 和 w3.org/TR/CSS2/visudet.html#the-height-property，它们声明属性“适用于：所有元素，但未替换的内联元素、表行和行组”

标签： css html width

【解决方案1】：

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

你可以把它变成一个块级元素，然后它会接受你的维度指令。

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

【讨论】：

谢谢，已修复。我之前尝试过 display:block 但内联块修复了它。
这就是问题所在。如果指定了display: block，span 将不再是一个内联元素，而是一个出现在下一行之后的元素。我需要一个内联元素，但可能具有所需的宽度。
更好的解决方案是用户显示：inline-block
我从未来爱你！（你的帖子已经有 10 多年的历史了，但在未来的这个时间就发布日期对我有所帮助！），我喜欢过去给我带来精彩的答案。我爱你！

【解决方案2】：

尝试使用div 而不是span 或使用CSS display: block; 或display: inline-block;—span 默认情况下是一个内联元素，不能采用width 和height 属性。

【讨论】：

div 不是 span 的语义替换。 span 是文本容器，而 div 是布局容器。应用像 Developer Art 建议的内联块样式是正确的答案。
该问题没有提供任何上下文来表明 div 在语义上本质上是不合适的。
实际上，阅读操作的标记实际上看起来有问题的元素被用来简单地显示背景图像。在这种情况下，div 实际上更合适。 -1 从 Isaac 的原始评论中删除。
此外，我在切换到 span 之前尝试使用 div，它总是显示在前一个 div 下.. 所以用 Span :)

【解决方案3】：

受@Hamed 启发，我添加了以下内容，它对我有用：

display: inline-block; overflow: hidden;

【讨论】：

【解决方案4】：

只有当我们将其设为块元素时，Span 才需要宽度和高度。

span {display:block;}

【讨论】：

我觉得display: inline-block;更好
这样做你会改变所有的跨度，我建议使用一个类。

【解决方案5】：

根据@Paul 的评论，如果指定了 display: block，span 将停止成为内联元素，并且在它出现在下一行之后成为元素。

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

添加overflow:hidden;并将其保持内联将解决刚刚在IE8 Quirks模式下测试的问题

【讨论】：

我一直在这种情况下看到overflow:hidden;。 “内容被剪辑，没有滚动条”says MDN。似乎违反直觉。它在这里做什么？

【解决方案6】：

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

尝试将display: block 添加到您的跨度中。

【讨论】：

【解决方案7】：

Span 一开始是一个内联元素。比如你可以把它的显示属性改成块状，它的高/宽属性就会开始生效。

【讨论】：

【解决方案8】：

span {display:block;} 还添加了换行符。

为避免这种情况，请使用span {display:inline-block;}，然后您可以为内联元素添加宽度和高度，也可以在块内对齐：

span {
        display:inline-block;
        width: 5em;
        font-weight: normal;
        text-align: center
     }

more here

【讨论】：

【解决方案9】：

使用这一切解决问题的方法

试试吧..

span.product__specfield_8_arrow
{
    display: inline-block;
}

【讨论】：

【解决方案10】：

现在有多种方法可以模拟相同的效果，但可以根据用例进一步定制属性。如上所述，这是可行的：

.product__specfield_8_arrow { display: inline-block }

还有

.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

JSFiddle 显示了这些显示属性在这种情况下的相似程度。