这是一组导航样式的链接:
http://tympanus.net/Development/ArrowNavigationStyles/
请向下滚动页面到最后一个样式“填充路径”。
我想更改导航箭头的位置,将每个导航箭头更多地推到容器的边缘。
在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 */
}
显然,我应该更改此处的“left
”属性以使箭头移动。但是,当我将其更改为 80%
时,一个箭头会靠近边缘(我想要的),而另一个则远离其边缘。应该如何编辑此规则以使两个箭头都被推近到它们的相邻边缘?
最佳答案
只需减小 .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; */
}
关于html - 如何更改此导航样式的位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25820403/