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

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

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

超文本标记语言

<span class="product__specfield_8_arrow">&nbsp;</span>​

小提琴

基本上，我试图模拟一个按钮，使一个跨度(或其他东西)看起来像一个按钮旁边的输入字段，实际上不需要是一个，因为自动填充生成器生成错误onEnter。我以为这是暂时的权宜之计但显然不行。

谢谢。

377171 次浏览
小开
最佳答案

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

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

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

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

尝试在span中添加display: block。

小开

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

小开

尝试使用div代替span或使用CSS display: block;或display: inline-block;—span默认是一个内联元素，不能具有width和height属性。

小开

只有当我们将Span设置为块元素时，它才具有宽度和高度。

span {display:block;}
小开

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

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

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

小开

受到@Hamed的启发，我添加了以下内容，对我来说很有效:

display: inline-block; overflow: hidden;
小开

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

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

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

更多这里

小开

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

.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文章。

小开

用这一切解决问题的方法

试一试. .

span.product__specfield_8_arrow
{
display: inline-block;
}
小开

我处理这个问题的方法是使用一个无边界的只读输入标记，然后你可以根据需要设置属性:

 <input  type="text" readonly
style="border:none; background-color: transparent; width:200px; margin-top:10px; padding-left: 10px;"
[value]="statusMessage">

提交答案