在div中重新排列span元素

Question

I'm trying to get an asterix "*" to appear directly above the "pp", however if I try to insert this in a span adjacent to the span containing the "pp" or directly after the price, it does not sit above as desired..

Can somebody please help? My html is below

 <div class="fist-div"> <span> <span data-bind="text: '£' + price">£731*</span> <small>pp</small> </span> </div> 

Answer 1

You can use sup tag to do this. Try this.

CSS & HTML

 sup{color:red} 

  <div class="fist-div"> <span> <span data-bind="text: '£' + price">£731</span> <small>pp<sup>*</sup></small> </span> </div> 

You can rearrange it wherever you want * to appear. Hope this help.

Answer 2

If you want * directly above pp, you need to adjust the position.

 .first-div small { position: relative; left: -10px; top: 2px; } 

 <div class="first-div"> <span> <span data-bind="text: '£' + price">£731*</span> <small>pp</small> </span> </div> 

Answer 3

You can do like this..

 sup { color: green; position: relative; left: 10px; } 

 <div class="fist-div"> <span> <span data-bind="text: '£' + price">£731<sup>*</sup></span> <small>pp</small> </span> </div>