雙百分號簽到css

Question

我在CSS中有一個問題，我的div僅在我有2％的跡象時出現。

如果我有：

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

這很好（注意第2行的50 %%）。

但是，如果我刪除額外的％符號，音頻標簽完全分散。

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

這顯然似乎不對 ，我不打算首先輸入2。 可能是什么導致了這個？

Js在這里小提琴。

Answer 1

width:50%%無效，這意味着<audio>將采用用戶代理樣式，即width:300px （請參閱檢查中）。 這就是為什么它的工作。

width:50%有效，但在您的情況下寬度不起作用，因為您的父級有0寬度， 0% 0也是0 。

嘗試以px給出寬度或為父級提供寬度。

堆棧代碼段

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