Annie The Cross Annie The Cross - 7 months ago 17
HTML Question

Span fix width in div

I have div and I need 6 span in there with fix width (now is there some text) - when I remove the text the width is 0px. What can I do? I tried dome things with

display: block;
but it moved spans under them..

Here is a JSFiddle demo.



#load-1 {
border-bottom: 3px pink solid;
width: 10px;
height: 10px;
}
#load-2 {
border-bottom: 3px grey solid;
}
#load-3 {
border-bottom: 3px grey solid;
}
#load-4 {
border-bottom: 3px grey solid;
}
#load-5 {
border-bottom: 3px grey solid;
}
#load-6 {
border-bottom: 3px grey solid;
}

<div class="load">
<span class="loading" id="load-1">hello</span>
<span class="loading" id="load-2">hello</span>
<span class="loading" id="load-3">hello</span>
<span class="loading" id="load-4">hello</span>
<span class="loading" id="load-5">hello</span>
<span class="loading" id="load-6">hello</span>
</div>




Answer

I don't know if i got it right but what i understand is that there should at least be an underlined block even if it contains no text. What you need to do is making div out of span because you can't apply a width to span tags. Then you should give the div a height and min-width in css. With the min-width you make sure that even if the div is empty it has at least this minimum width.

Look at my fiddle here: http://jsfiddle.net/e8t64vtk/2/

Comments