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

完全是新手问题，但这里。

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。我以为这是暂时的权宜之计但显然不行。

谢谢。

当前回答

Span {display:block;}还添加了一个换行符。

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

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

更多的在这里

2019-06-25 13:19:08

其他回答

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

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

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

2010-03-22 09:33:41

Span {display:block;}还添加了一个换行符。

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

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

更多的在这里

2019-06-25 13:19:08

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

.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显示了这些显示属性在本例中的相似程度。

有关讨论请参阅这篇SO帖子。

2020-07-22 01:54:26

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

尝试在span中添加一个display: block。

2010-03-22 09:34:52

Span开始时是一个内联元素。例如，您可以将其显示属性更改为block，然后其高度/宽度属性将开始生效。

2010-03-22 09:35:14

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

推荐文章

最新文章

标签