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

总的菜鸟问题,但在这里.

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

 ?

小提琴

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

谢谢.

1> 小智..：

---

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

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

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

---

那就是问题所在.如果指定了`display:block`,则span将停止为内联元素,并在下一行显示后显示元素.我需要一个内联的元素,但可以是所需的宽度.

---

谢谢,修好了.我试过显示:块之前,但内联块修复它.

---

更好的解决方案是用户显示:内联块

2> Isaac..：

---

尝试使用div而不是使用span或使用CSS display: block;或display: inline-block;- span默认情况下是一个无法获取width和内部height属性的内联元素.

---

div不是跨度的语义替代.span是文本容器,而div是布局容器.应用像Developer Art这样的内联块样式是正确的答案.

---

该问题没有提供上下文来指示div在语义上本质上是不合适的.

3> 小智..：

---

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

display: inline-block; overflow: hidden; 

4> Touhid Rahma..：

---

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

span {display:block;}

---

我认为`display:inline-block;`更好

5> Hamed Ali Kh..：

---

根据@Paul的注释,如果指定了display:block,则span将停止为内联元素,并在下一行显示后显示一个元素.

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

添加overflow:hidden;和内联它将解决刚刚在IE8 Quirks模式下测试的问题

6> Edan Maor..：

---

spans默认显示为内联,这意味着它们没有高度和宽度.

尝试添加一个display: block跨度.

7> 小智..：

---

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