0

当我在不同的屏幕尺寸上查看我的网站时，按钮和均衡器会移动到不同的点。那么如何使它的位置固定在任何屏幕尺寸上呢？

按钮html代码：

<div id="player" class="player">
  <i id="playback" class="fa fa-play fa-3x"></i>
</div>

<audio controls loop style="display:none">
    <source src="http://streaming.radionomy.com/MSTC-CHI" type='audio/ogg'>
    <source src="http://streaming.radionomy.com/MSTC-CHI" type='audio/mpeg'>
</audio>

CSS代码：

#playback {
position: absolute;
top: 30%;
left: 40%;
width:auto;
color:white;
}

#player:after {
        position: absolute;
        content: '';
        width: 150px;
        height: 150px;
        left: 0;
        color:white;
        border-radius: 50%;
        -webkit-transform: rotate(4deg);
        transform: rotate(-75deg);
}

#playback {
        position: absolute;
        color:white;
        left:29.7%;
        top:46.25%;
        text-shadow: 0 0 40px #fff;
}

.fa-stop{
        margin-left:-0.46%;
}

#player{
        -moz-transition: all 0.8s ease-in-out;
        -webkit-transition: all 0.8s ease-in-out;
        -o-transition: all 0.8s ease-in-out;
        -ms-transition: all 0.8s ease-in-out;
        transition: all 0.8s ease-in-out;
}

#player:hover{
        box-shadow: 0 0px 20px #fff;
}

我试图使显示块、边距自动、位置绝对，并确定顶部和左侧位置。

#player {
        display: block;
        margin: 0 auto;
        top: 46%;
        left: 30%;
        position: absolute;
}

#music-bar {
        display: block;
        margin: 0 auto;
        top: 75%;
        left: 58%;
        position: absolute;
}

但仍然无法正常工作。知道如何解决这个问题吗？提前致谢。

4

1 回答 1

0

尝试使用以下代码段。

  position:absolute;
  top: 50;
  right:0;

在您的示例中，您使用百分比。我认为您应该使用的是绝对数字（例如以像素为单位）。

该元素将放置在右上角，距顶部 50 像素。

于 2015-05-11T13:33:38.600 回答