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

默认情况下，Spans为display: inline;。

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

Answer 2

因为CSS选择器是用.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>

提示：

使用display: inline-block;以避免float:left;
使用text-align: center;＆amp; 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;

css宽度和高度不起作用

3 个答案: