css - 固定位置弄乱了宽度

Question

我在 div 中有一个 HTML5 音频播放器。我已将其宽度设置为 100%。我想在滚动时将播放器固定在顶部，所以我固定了它的位置。问题是当我这样做时，播放器宽度会溢出容器。

下面是我的代码。

HTML

<div id="container">
    <audio arc="#" controls></audio>
</div>

CSS

#container {
    width : 350px;
    height: 300px;
    background: #BADA55;
}

audio {
    width: 100%;
    /*position: fixed;*/
}

我创建了一个小提琴来演示这个问题。它目前处于我希望它看起来像的状态。取消注释position: fixed;以查看问题。

谁能告诉我我应该怎么做才能使它保持在正确的宽度上？

谢谢

score 3 · Accepted Answer

3

你可以试试

width:inherit;

于 2013-10-25T07:15:39.177 回答

score 0 · Accepted Answer

需要包装音频元素并将 css 应用于包装器。我更新了你的jsfiddle。

<div id="container">
  <div class="audioWrap">
    <audio arc="#" controls></audio>
  </div>
</div>

然后CSS：

#container {
  width : 350px;
  height: 300px;
  background: #BADA55;
  position: relative;
}

.audioWrap {
  width: 100%;
  position: fixed;
}

请注意，如果您要修复它在容器内的位置，您可能需要将“位置：相对”添加到容器中。我继续并将其添加到 jsfiddle。

2 回答 2