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

Question

完全菜鸟问题，但在这里。

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

小提琴

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

谢谢。

原文由 Kyle 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

原文由 user151323 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Try using a div instead of the span or using the CSS display: block; or display: inline-block; — span is by default不能采用 width 和 height 属性的内联元素。

原文由 Isaac 发布，翻译遵循 CC BY-SA 2.5 许可协议