代码之家 › 专栏 › 技术社区 › Kyle

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

width html css

209

Kyle · 技术社区 · 14 年前

完全没有问题,但在这里。

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

基本上,我试图模拟一个按钮,使一个跨度(或其他东西)看起来像一个按钮旁边的一个输入字段,实际上不需要是一个,因为一个自动填充生成器,生成一个错误。我想这是一个很快的解决办法,但显然不是。

谢谢。

7 回复 | 直到 8 年前

356

user151323 14 年前

SPAN是内联元素。它没有宽度和高度。

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

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

Isaac 14 年前

尝试使用 div 而不是 span 或者使用css display: block; 或 display: inline-block; - 跨度 默认情况下是不能接受的内联元素 width 和 height 性能。

olleh 8 年前

灵感来自@hamed,我添加了以下内容,这对我很有用:

display: inline-block; overflow: hidden;

Touhid Rahman 11 年前

SPAN只在成为块元素时才采用宽度和高度。

span {display:block;}

Hamed Ali Khan 10 年前

根据@paul的注释,如果指定了display:block,则SPAN将停止为内联元素,并在下一行出现后停止为元素。

我来这里是想找到解决跨度高度问题的方法

添加 overflow:hidden; 保持内联将解决刚刚在ie8 quirks模式下测试的问题

Edan Maor 14 年前

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

尝试添加 display: block 你的跨度。

MaxGuernseyIII 14 年前

SPAN以内联元素开始。例如,可以将其“显示”属性更改为“块”,其“高度/宽度”属性将开始生效。