CODEWITHSUNDEEP
htmlcss
hucmarcot
hucmarcot

Reputation: 311

How to set fixed width for span

see my screenshot, even I set width, the span width still be "auto"

enter image description here

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>

Upvotes: 22

Views: 73695

Answers (2)

j08691
j08691

Reputation: 207861

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).

Upvotes: 63

Ashish Patel
Ashish Patel

Reputation: 772

 Just use 

<div class="container">
<div class="row" style="width:auto;background-color: red;"><span>prefix1</span><span>prpr</span></div>
<div class="row" style="width:auto;background-color: red;"><span>pre2</span><span>prpr</span></div>
</div>

Upvotes: -1

Related Questions