所以我对这个html和css的事情非常陌生,而且我有点问题。我是第一次在切割网站的过程中,但是我的子导航定位存在问题。
我的问题是,我的FAQS页面上的Sub Nav正在被推离浏览器的中心和右侧。但是,其他页面上的subnav,例如'支持',它使用与FAQS页面上的html结构和css样式完全相同的html结构和css样式,很好并且完美地居中。
当我检查元素'在浏览器中,它似乎认为左侧有一个额外的subnav按钮,并且如果有意义的话,FAQS subnav按钮位于subnav的中间位置?
该文件夹中的第二个FAQS页面有效......但是这是通过从支持页面中逐字复制并粘贴代码然后删除不需要的位来进行的,然后复制在我需要的FAQS页面的部分中,改为使用.html。
所以我觉得这只是一个拼写错误或语法错误或其他简单的事情。我真的很想知道我做了什么,所以我可以在将来避免它,并知道如何解决它。
以下是我的子导航的html(和页面标题):
<div class="grid grid-pad">
<div class="col-1-1">
<div class="subnav clearfix">
<a href="support.html"class="b1"> Support </a>
<a href="FAQS.html"class="b1 subactive"> FAQS <div class="triangle"> </div> </a>
<a href="membersforum.html"class="b1"> Swifd Forum </a>
<a href="videotutorials.html"class="b1"> Video Tutorials </a>
</div>
<div class="pagetitle">
<h1 class="pageheading"> FAQS </h1>
<div class="pageheadingborder"> </div>
<h2 class="subtitleFAQS"> Got questions that need answering? <strong> we've got you covered</strong></h2>
</div>
</div>
</div>
到目前为止,这是CSS:
/*---------------- SUB NAV ---------------*/
.subnav {
margin: 0 0 60px 0px;
text-align: center;
}
.subnav a {
display:inline-block;
font-family:'Bebas Neue', 'Oswald', Arial, sans-serif;
color:#ffffff;
background-color:#000000;
line-height: 1.5;
font-weight:bold;
text-transform:uppercase;
font-size: 23px;
margin:5px;
width: 180px;
position: relative;
transition: all 200ms ease 0s;
}
a.b1.subactive {
background-color: #ee812c;
}
a.b1.subactive div.triangle {
width: 0;
height:0;
border-style: solid;
border-width: 15px 32.5px 0 32.5px;
border-color: #ee812c transparent transparent transparent;
position: absolute;
top:100%;
left: 50%;
margin-left: -30px;
z-index: 2;
}
.subnav a:active {
top: 2px;
}
我知道它有点生疏,但任何帮助都会非常感激。
这是一个非常基本的模型:https://jsfiddle.net/2Ly4v9qu/
三江源!