Question

以下是一组导航样式的链接：

http://tympanus.net/Development/ArrowNavigationStyles/

请向下滚动页面到最后一个样式＆＃34;填写路径＆＃34;。

我想更改导航箭头的位置，将每个箭头更多地推到容器的边缘。

在component.css文件的第924行中，有以下规则：

.nav-fillpath a::before,
.nav-fillpath a::after,
.nav-fillpath .icon-wrap::before,
.nav-fillpath .icon-wrap::after {
    position: absolute;
    left: 50%;
    width: 3px;
    height: 50%;
    background: #566475;
    content: '';
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    outline: 1px solid transparent; /* for FF */
}

显然，我应该更改＆＃34; left＆＃34;这里有箭头移动的属性。但是当我将它更改为例如80%时，一个箭头移动到更靠近边缘（我想要的边缘），而另一个箭头移动到边缘。应该如何编辑此规则，以使两个箭头都被推到其相邻边缘？

Answer 1

只需减少.nav-fillpath css类的宽度。

.nav-fillpath{
      width: 100px; /* decrease this width */
      /* other css properties */
}

要从导航图标中为文本提供一些空格，请将边距设为.nav-fillpath h3。

.nav-fillpath h3{
     margin: 0px 30px;  /* remove margin: 0px; */
}

Answer 2

您可以right和left .next和.prev：

nav a.next {
    right: -35px;
}

nav a.prev {
    left: -35px;
}

Answer 3

试试这个：

.nav-fillpath .prev { margin-left:-80px;}

如何改变这种导航风格的位置？

3 个答案: