Menu
see my screenshot, even I set width, the span width still be "auto"
here is my
<div class="container">
<div class="row"><span style="width:60px;background-color: red;">prefix1</span><span>prpr</span>
</div>
<div class="row"><span style="width:60px;background-color: red;">pre2</span><span>prpr</span>
</div>
</div>
211
The main thing to remember about a span element is that it is an inline element, which means that you will not be able to set the width or height of it as is.
So, how can we fix that? Well, the only solution to this problem is changing the block type of the span tag. That is, to set the width or height of a span, we have to either make it a block or inline-block level element.
By default a span element has no dimension because its CSS display property is inline. If you want to give it a width, you should change that property to inline-block. Now you can play with its dimensions.
n. 1. The extent or measure of space between two points or extremities, as of a bridge or roof; the breadth. 2. The distance between the tips of the wings of an airplane.
Set the display property of the spans to inline-block like:
.container span {
display: inline-block;
}<div class="container">
<div class="row"><span style="width:60px;background-color: red;">prefix1</span><span>prpr</span>
</div>
<div class="row"><span style="width:60px;background-color: red;">pre2</span><span>prpr</span>
</div>
</div>An inline element occupies only the space bounded by the tags that define the inline element (MDN).
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
