I have the following code, but width/height of spans doesn't really work.
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}
Spans are display: inline;
by default.
To get them to listen to a height and width, you'll need to add display: block;
.
Because the CSS selectors are namespaced with .shop_chekout_item
, a wrapping div needs to be added around the HTML code. Then it will work. 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>
Tips:
display: inline-block;
to avoid having to float:left;
text-align: center;
& vertical-align: middle;
to make it look nice. :) 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;
right before the width and height setting. Should work now, as by default the spans are display: inline;
While the display property is inline
, height and width will not work.
display :inline;
By changing the display property from inline
to block
or inline-block
, height and width should be worked properly.
display: block ;
// or
display: inline-block
The default display
property of span is inline
, so width and height properties will be not considered.
Instead use
display: inline-block;
//or
display: block;
here display:block;
will span the element's width.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.