用CSS实现音乐播放进度条的问题

问题描述

问 题

求教：想用css实现一个显示音乐播放进度条的效果，这里为什么连个矩形都画不出来？

<div id="bottom">
        <img class="icon" id="rewind" src="./assets/icons/rewind.png"></img>
        <img class="icon" id="play" src="./assets/icons/play.png"></img>
        <img class="icon" id="pause" src="./assets/icons/pause.png"></img>
        <img class="icon" id="forward" src="./assets/icons/forward.png"></img>
        
        <span id="currentTime">00:00</span>
        <div id="time_move"></div>
        <img src="./assets/icons/dot.png" id="process_img"></img>
        <span id="totalTime">00:00</span>
            
    </div>

---

#bottom{
    position:absolute;
    width:72.6%;
    height:8%;
    top:90.7%;
    right:0.5%;
    background-color:white;
    border-radius: 0 0 5px 5px;
    border: 2px solid #777;
    border-bottom:none; 
}
.icon{
    width:61.4px;
    height:61.4px;
    vertical-align:middle;
}
.icon:hover{
    cursor:pointer;
}
#play{
    display:none;
    vertical-align:middle;
}
#time_move{
    width:200px;
    height:100px;
    background:blue;
    display:inline;
}

解决方案

inline元素是不能设宽高的，改成inline-block

这篇关于用CSS实现音乐播放进度条的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！