Question

我目前正在使用网站http://ezlimiteds.com/。左箭头应该与右箭头位于相同的位置。当试图镜像我用左箭头做同样的事情时，它似乎“包裹着”＃39;当我margin-left: -75px

时，它就到了顶部

它曾经工作，然后我搞砸了。

按钮：

<div class="controls">
<a class="back" href="?page=<?php echo($_SESSION['page']-1) ?>"><i class="fui-arrow-left"></i></a>
<a class="next" style="float: right; margin-right: -75px;" href="?page=<?php echo($_SESSION['page']+1) ?>"><i class="fui-arrow-right"></i></a>
</div>

相关的css：

.controls {
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    font-size: 50px;
}

.container {
  width: 970px !important;
  padding-top: 25px;
  margin-top: 25px;
  z-index: -1;
}

Answer 1

右箭头具有属性

margin-right: -75px;

当您为左箭头添加相同内容时，它会将div拉得太远，如果您将值调低，它应该可以正常工作。

.back {
    margin-left: -50px;
}

.next {
    margin-right: -50px;
}

Answer 2

看到html代码后，我发现你的网站有一些问题：

我看到以上10个名为'item'的id属性，是不是每个页面只出现一次相同的ID？
HTML构造函数不适合.Float未关闭类属性'container'，你会发现div.controls有940 x 705px
也许你可以使用css位置（如绝对/固定）让箭头位置正确。（如果我们可以轻松比为什么要做更多让自己迷惑的话）

第一个答案似乎不正常......（我的意思是设置margin-left到-50px不起作用）

负边际＆＃34;包装＆＃34;？

2 个答案: