html - 使进度条动态更改宽度以适应容器其余部分的大小

Question

我有一个用 jquery 构建的音频播放器。标记和 css 相对简单，但我无法让进度条随整个容器的宽度改变宽度。

它被设置为百分比但不作为容器 div 的子项。我猜这与位置是绝对的有关，但如果我改变它，整个事情就会出错。

这是标记

<div class="container gradient">

    <div style="width:100px; overflow:hidden; display:inline-block;"><a href="" target="_blank"><img src="" class="artwork" height="100%"></a></div>
    <div class="name">

<p1><a href="" target="_blank"></a><br>
    <b></b></p1>

    </div>
    <div class="logo" style="font-size:12px; text-align:right; font-weight:bold;">


            <br><a href="" target="_blank""></a>
    <br>


    </div>
    <div class="player gradient">



        <a class="controls gradient" id="play" href="" title=""></a>



            <input type="range" id="seek" value="0" max=""/>




    </div><!-- / player -->

</div><!-- / Container-->

还有CSS

.gradient {
border: 1px solid #C4C4C4;

background: #F2F2F2; 

}

.container {

position: absolute;
width: 100%;
height: 122px;



top: 0%;
left: 0%;

padding: 10px;



.artwork {height:100px; overflow:hidden; margin-left:auto; margin-right:auto;}

.containerLarge {
height: 427px;
}



.name {left:120px; position:absolute; top:7px}
.player {

box-sizing: border-box;
position:absolute;
width:91%;
bottom: 10px;

left:120px;



border-radius: 3px;
padding: 5px;
}

.controls {
border-radius:1em;
background-color:#0485bf;
display: block;
width: 34px;
height: 34px;
background-image: url(../player/src/images/sprite.png);
background-repeat: no-repeat;
float: left;
margin-right: 5px;


}
.controls:hover {background-color:#005b85}

#play {
background-position: 6px 5px;
}

#pause {
background-position: -32px 5px;
}


input[type="range"] {
width: 250px;
margin-top: -5px;
}

#close {
float: right;
background-position: -146px 5px;
display: none;
}

.volume {
position: absolute;
height: 100px;
width: 34px;
border: 1px solid black;
background-color: #242323;
top: -97px;
display: none;
}
input{
display:none\9!important;
}
input[type="range"] {

border: 1px solid #C4C4C4;
position: absolute;
top: 18px;
display: block;
width: 95%;
height: 15px;

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background-color: #DBDBDB;
left: 50px;

}

input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border:1px solid #C4C4C4;

-webkit-border-radius: 10px;
border-radius: 10px;
background: #0485bf; 

}

input::-webkit-slider-thumb: hover {opacity : 0.3;filter: alpha(opacity=30)}

.logo {float:right; }

.embed {width:100%; background-color:black }

有问题的主要元素是 .container、.controls、.player 和输入类型范围。

Answer 1

很难从标记中看出发生了什么。进度条是哪个元素？如果某物是绝对定位的并设置为 100% 宽度，它将填充屏幕的宽度，而不是它的父元素(除非它的父元素设置为 position:relative)。