Question

我正在创建一个图片滑块，我想要＆＃34;之前的＆＃34;和＆＃34; next＆＃34;每个箭头占据滑块面积的一半。在我放置之后，增加填充或边距会使箭头的位置发生偏移。

我找到的最接近的解决方案是使用：before伪选择器作为per this link。这将运作良好，但我对社区的其他建议持开放态度，因为目前的方法感觉有点＆＃34; hacky。＆＃34;

使用这种方法，我试图设置每个箭头以占据滑块框的正好一半，但我无法弄清楚如何保持这些区域对窗口宽度的响应。

请查看此小提琴并调整窗口大小。

http://jsfiddle.net/amoeboar/avqjnfwt/1/

我希望可点击区域的两半总是占据滑块窗口的一半，而不是重新定位箭头。

.prev:before{
    position:absolute;
    content:'';
    top: -40%;
    right: -235%;
    left: -40%;
    bottom: -120%;
    outline:1px solid red;
    z-index:40;
}

但这并不起作用。首先，设置负百分比似乎很奇怪，其次，调整窗口大小并不像我希望的那样保留可点击区域的形状和大小。我希望左箭头占据边界框的正好一半，而右箭头也是如此。

有人可以提出建议吗？

Answer 1

您不需要链接上的::before和::after伪元素;他们只会让事情变得更加困难。

真正的解决方案是简单地将<a>自己定位到您想要的屏幕区域，并在每个<a>内使用填充来定位箭头。

.prev,
.next {
    display:block;
    position: absolute;
    left:0; right:50%;
    top:0; bottom:0;
    text-decoration: none;
    color: salmon;
    font-size: 8em;
    outline:1px solid red;
    padding:70px 40px;
}

.next {
    left:50%; right:0;
    text-align:right;
    transform:scaleY(-1);
}

这就是全部。由于<a>已经绝对定位，因此您不需要z-index;他们已经处于领先地位。

请参阅updated fiddle。

顺便说一句，您不应在HTML中的文字中使用<，请使用<。

CSS：在伪选择器之前并增加<a> tag</a>的面积

1 个答案: