高度和宽度不适用于跨度吗？

254

总菜鸟问题，但在这里。

的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>

小提琴

基本上，我试图模拟一个按钮，使跨度（或某个范围）看起来像一个输入字段旁边的按钮，由于自动填充生成器会在onEnter上生成错误，因此实际上不需要是一个输入字段。以为这是目前的快速解决方案，但显然不是。

谢谢。

css html width

— 凯尔
source

2

你可能也想看看stackoverflow.com/questions/2343989/...

— 鹅蛋帽儿

2

还要检查标准，特别是w3.org/TR/CSS2/visudet.html#the-width-property和w3.org/TR/CSS2/visudet.html#the-height-property，其中指出了属性“适用于：所有元素，但不可替换的内联元素，表行和行组”

— outis

426

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

您可以将其转换为块级元素，然后它将接受您的维度指令。

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

— Basheer AL-MOMANI
source

9

谢谢，修复它。我尝试过display：block，但是内联块修复了它。

— 凯尔（Kyle）2010年

21

那就是问题所在。如果display: block指定，则span不再是一个内联元素，而是它出现在下一行之后的元素。我需要一个内联元素，但可以具有所需的宽度。

— Paul

6

更好的解决方案是向用户显示：内联块

— Anant

37

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

— 以撒
source

9

div不是跨度的语义替代。跨度是文本容器，而div是布局容器。正确使用答案是使用像Developer Art这样的内联块样式。

— Brian Scott

3

该问题没有提供任何上下文来表明div本质上不适当。

— 艾萨克（Isaac）2010年

1

实际上，读取op的标记实际上看起来像是所涉及的元素仅用于显示背景图像。在这种情况下，div实际上更合适。-1从以撒的原始评论中删除。

— Brian Scott

此外，我尝试在切换到跨度之前使用div，它始终显示在前一个div下。.Span:)

— Kyle 2010年

22

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

display: inline-block; overflow: hidden;

— 奥列
source

11

跨度只有在将其设为块元素时才采用宽度和高度。

span {display:block;}

— 图赫德·拉曼（Touhid Rahman）
source

14

我觉得display: inline-block;比较好

— 151291

这样一来，您将对所有跨度进行更改，我建议您使用一个类。

— Hola Soy Edu Feliz Navidad '18

9

根据@Paul的评论，如果指定了display：块，则span不再是一个内联元素，而是在下一行出现后的元素。

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

overflow:hidden;内联添加和保留它可以解决刚刚在IE8 Quirks模式下测试的问题

— 哈米德·阿里·汗（Hamed Ali Khan）
source

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

— 鲍勃·斯坦

8

span默认情况下，s是内联显示的，这意味着它们没有高度和宽度。

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

— 伊丹·毛
source

6

跨度作为内联元素开始。例如，您可以将其显示属性更改为block，然后其height / width属性将开始生效。

2

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

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

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

这里更多

— 标记
source