双百分号签到css

Question

I'm having an issue in CSS where my div is only appearing when I have 2 percent signs.

If I have:

<div class="col-md-8" style="display:inline-block;">
  <audio style="width:50%%" controls="controls">
    Your browser does not support the <code>audio</code> element.
    <source src="music_mix.mp3" type="audio/mp3"> 
  </audio>
</div>
<div class="col-md-4"style="display:inline-block;">Speed:
  <div class="slidecontainer" style="width:50%%"> 
    <input style="border-radius: 5px;" type="range" min="1" max="20" value="14" ng-change="updateValue()"   ng-model="trueSpeed" class="slider" ></div> {{speed}} 
  </div>
</div>

This works fine (note the 50%% on line 2).

But if I remove the extra % sign, the audio tag dispers entirely.

<div class="col-md-8" style="display:inline-block;">
  <audio style="width:50%%" controls="controls">
    Your browser does not support the <code>audio</code> element.
    <source src="music_mix.mp3" type="audio/mp3"> 
  </audio>
</div>
<div class="col-md-4"style="display:inline-block;">Speed:
  <div class="slidecontainer" style="width:50%"> 
    <input style="border-radius: 5px;" type="range" min="1" max="20" value="14" ng-change="updateValue()"   ng-model="trueSpeed" class="slider" ></div> {{speed}} 
  </div>
</div>

This obviously doesn't seem right , and I did not intend to type 2 in the first place. What could be causing this?

Js fiddle here.

Answer 1

The width:50%% is invalid, it means <audio> will take the user agent style ie width:300px (See in the inspect) in chrome. Thats why its working.

The width:50% is valid, but in your case width is not working because your parent has 0 width and 0% of 0 is also 0 .

Try to give width in px or give width to your parent.

Stack Snippet

 <div class="col-md-8" style="display:inline-block;"> <audio style="width:100px" controls="controls"> Your browser does not support the <code>audio</code> element. <source src="music_mix.mp3" type="audio/mp3"> </audio> </div>