垂直导航栏问题(对角线条)

时间:2017-07-13 13:19:23

标签: css responsive

目前正在为一个客户的网站工作,该客户想要一个与背景图像对齐的自定义导航栏。

工作解决方案如下:

enter image description here

我遇到的问题是,当浏览器调整大小/某些桌面监视器时,导航栏不会与背景对齐。造成这种情况的原因是我已经编码了像素值而没有正确响应,这是我目前所处的位置。任何人都可以指导我如何根据浏览器大小/视口改变角度,以实现所有台式机/平板电脑设备所需的对齐?

可以根据需要提供代码,导航栏只是一个带边距的垂直菜单。



    .nav {margin:0; position: fixed; z-index: 9999999; left:734px; top: 79px; width: 200px;}
.nav ul {}
.nav ul li {list-style: none; border-bottom:1px solid #7c818c; padding-bottom: 10px; padding-top:11px; width:170px;  font-size: 14px;}
.nav ul li:nth-child(2) {margin-left:27px;}
.nav ul li:nth-child(3) {margin-left:55px;}
.nav ul li:nth-child(4) {margin-left:87px;}
.nav ul li:nth-child(5) {margin-left:118px;}
.nav ul li:nth-child(6) {margin-left:146px;}
.nav ul li:nth-child(7) {margin-left:180px;}
.nav ul li:nth-child(8) {margin-left:205px;}
.nav ul li:nth-child(9) {margin-left:235px;}
.nav ul li a {color: #7c818c; text-decoration: none;/* text-transform: uppercase;*/}
.nav ul li a:hover, nav ul li a.active {color: #fff;}




0 个答案:

没有答案