css 宽度和高度不起作用

Question

我有以下代码，但是跨度的宽度/高度实际上不起作用。

HTML

<div id="amount" class="ch_field3">
<span id="ch_minus">-</span> 3 <span id="ch_plus">+</span>
</div>

CSS

.shop_chekout_item{min-width: 100%; float: left;}
.shop_chekout_item .ch_field3{display: block;float: left; width: 20%;}

.shop_chekout_item #ch_plus,.shop_chekout_item #ch_minus{
background: #ccc; 
width:  20px; /*no effect...*/
height: 20px; /*same here :(*/
cursor: pointer}

Answer 1

display: inline;跨度display: inline; 默认。

要让他们听高度和宽度，你需要添加display: block; 。

Answer 2

由于CSS选择器使用.shop_chekout_item命名空间， .shop_chekout_item需要在HTML代码周围添加包装div。 然后它会工作。 的jsfiddle

HTML：

<div class="shop_chekout_item">
  <div id="amount" class="ch_field3">
    <span id="ch_minus">-</span> 3 <span id="ch_plus">+</span>
  </div>
</div>

提示：

1. 使用display: inline-block; 避免float:left;
2. 使用text-align: center; ＆ vertical-align: middle; 让它看起来不错。 :)

CSS：

.shop_chekout_item{min-width: 100%; float: left;}
.shop_chekout_item .ch_field3{display: block;float: left; width: 20%;}

.shop_chekout_item #ch_plus,
.shop_chekout_item #ch_minus{
  background: #ccc; 
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  width:  20px;
  height: 20px;
  cursor: pointer;
}

Answer 3

添加属性display: block; 就在宽度和高度设置之前。 现在应该工作，因为默认情况下display: inline;跨度display: inline;

Answer 4

虽然 display 属性是inline ，但高度和宽度将不起作用。

display :inline;

通过将 display 属性从inline更改为block或inline-block ，高度和宽度应该可以正常工作。

display: block ;
// or
display: inline-block

Answer 5

span的默认display属性是inline ，因此不会考虑宽度和高度属性。

而是使用

display: inline-block;

//或者

display: block;

这里display:block; 将跨越元素的宽度。