0

音乐播放器

考虑这个图像。这里我有一个背景图片（只有播放器的外部，而不是按钮计时和进度条）。现在我想将播放、下一个、上一个和停止按钮放在完全相同的位置。

#playbuttonimg{
    margin-left:-95px;
    position: absolute;
    top:20px;
}
#pausebuttonimg{
    margin-left:-95px;
    position: absolute;
    top:20px;
    display: none;
}
#prevbuttonimg{
    position: absolute;
    /*margin-left:-15px;*/
    top:24px;
}
#stopbuttonimg{
    position: absolute;
    margin-left:18px;
    top:24px;
}
#nextbuttonimg{
    position: absolute;
    margin-left:50px;
    top:24px;
}

如果我使用这种样式，在桌面浏览器中它会很完美，但在移动设备中，margin-left 为负值会使按钮超出屏幕，并且正边距将可见但不会相应放置。

由于它是移动网站，它应该适合所有移动设备。我怎样才能在css中做到这一点？有没有办法在不使用媒体查询的情况下做到这一点？或者有没有其他方法可以使它适合所有移动设备？

4

2 回答 2

2

您可以将 a 添加position:relative;到您的主要父 div。

于 2013-05-13T09:19:51.397 回答
-1

如果您使用百分比值，这应该可以，我的意思是您已经使用了

margin-left:xxxpx;

以像素为单位，但如果您可以计算其百分比值，这可能会解决。

对于计算，您可以获得http://resources.sameerast.com/responsive-web-design-formula-easy-calculator.html的帮助

于 2013-05-13T09:09:44.613 回答