[英]css width and height doesn't work
I have the following code, but width/height of spans doesn't really work.我有以下代码,但是跨度的宽度/高度实际上不起作用。
HTML HTML
<div id="amount" class="ch_field3">
<span id="ch_minus">-</span> 3 <span id="ch_plus">+</span>
</div>
CSS 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}
Spans are display: inline;
display: inline;
跨度display: inline;
by default. 默认。
To get them to listen to a height and width, you'll need to add display: block;
要让他们听高度和宽度,你需要添加
display: block;
. 。
Because the CSS selectors are namespaced with .shop_chekout_item
, a wrapping div needs to be added around the HTML code. 由于CSS选择器使用
.shop_chekout_item
命名空间, .shop_chekout_item
需要在HTML代码周围添加包装div。 Then it will work. 然后它会工作。 jsfiddle
的jsfiddle
HTML: 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>
Tips: 提示:
display: inline-block;
display: inline-block;
to avoid having to float:left;
float:left;
text-align: center;
text-align: center;
& vertical-align: middle;
vertical-align: middle;
to make it look nice. CSS: 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;
}
Add a property display: block;
添加属性
display: block;
right before the width and height setting. 就在宽度和高度设置之前。 Should work now, as by default the spans are
display: inline;
现在应该工作,因为默认情况下
display: inline;
跨度display: inline;
While the display property is inline
, height and width will not work.虽然 display 属性是
inline
,但高度和宽度将不起作用。
display :inline;
By changing the display property from inline
to block
or inline-block
, height and width should be worked properly.通过将 display 属性从
inline
更改为block
或inline-block
,高度和宽度应该可以正常工作。
display: block ;
// or
display: inline-block
The default display
property of span is inline
, so width and height properties will be not considered. span的默认
display
属性是inline
,因此不会考虑宽度和高度属性。
Instead use而是使用
display: inline-block;
//or //或者
display: block;
here display:block;
这里
display:block;
will span the element's width.将跨越元素的宽度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.