Question

我创建了一个网站并进行了在页面之间移动的过渡，我遇到了触发转换的按钮定位问题。有6个按钮，（每页2个），我在标签中放了一个png img。这是按钮的HTML代码

<div class="pt-page pt-page-3">
    <div class="pt-trigger-container">
        <button class="pt-trigger button1" data-animation="1" data-goto="3"></button>
    <button class="pt-trigger button2" data-animation="2" data-goto="2"></button>   
    </div>
</div>

这是css代码：

.pt-trigger-container {
    position: absolute;
    width: 100px;
    z-index: 999999;
    left: 50%;
    margin-top: 75px;
    margin-bottom: 75px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}




.pt-trigger {
    border: none;
    font-size: 16px;
    font-weight: 20; 
    margin: 20px 0 20px;
    padding: 0 50px;
    height: 80px;
    letter-spacing: 1px;
    width: 100%;
    cursor: pointer;
    font-family: 'Orator std';
    box-shadow: 0 3px 0 #181917;
}

.button1 {
    position: relative;
    top:50px;   
    bottom:100px;
    left:0120px;
    right:0px;
}

.button2 {
    position: relative;
    top:50px;
    bottom:200px;
    left:100px;
    right:300px;
}

Answer 1

在css文件中进行以下更改：在BOLD中进行的更改

.button1 {
    position: relative;
    top:50px;   
    bottom:100px;

<强>左：100px的; 右：0像素; }

过渡的定位按钮

1 个答案: