Question

总noob问题，但在这里。

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

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

感谢。

Answer 1

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

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

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

Answer 2

尝试使用div代替span或使用CSS display: block;或display: inline-block; - span默认情况下是内联元素，无法使用{ {1}}和width属性。

Answer 3

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

display: inline-block; overflow: hidden;

Answer 4

只有在我们制作块元素时，Span才会占用宽度和高度。

span {display:block;}

Answer 5

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

尝试在您的范围内添加display: block。

Answer 6

根据@Paul的评论，如果指定了display：block，则span将停止为内联元素，并在下一行显示后显示元素。

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

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

Answer 7

Span以内联元素开头。例如，您可以将其display属性更改为block，其高度/宽度属性将开始生效。

Answer 8

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

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

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

more here

Answer 9

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

.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显示了这种情况下这些显示属性的相似程度。

有关讨论，请参见this SO post。

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

9 个答案: