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 fiddle here.

Answer 1

width:50%%无效，这意味着<audio>将采用用户代理样式，即width:300px（请参阅检查中）。这就是为什么它的工作。

width:50%有效，但在您的情况下宽度无效，因为您的父级0宽度0% 0也是0。

尝试在px中给出宽度或给父母宽度。

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>

双百分号签到css

1 个答案: