Blogger 中选定的页面选项卡背景溢出
Selected page tab background overflowing in Blogger
我花了一些时间让我的导航栏高于我的 header 并让它扩展我博客的宽度 Boy Full of Books
但是,我遇到了两个问题。主要问题在博客上很明显——所选选项卡的背景溢出到页面上,而不是与导航栏的其余部分保持一致。另一个问题不是我非常担心的问题,但如果有人有任何指导,那就太好了。缩小或放大时,导航栏中的页面选项卡不随页面大小调整。
下面是我的代码(不是很好,我知道,我还是个新手):
.PageList {
text-align:center !important;
width: 100%;
}
.PageList ul {
margin-top: -42px;
margin-bottom: 0px;
margin-left: -20px;
background-color: #424242 !important;
width: 100%;
}
.PageList li {
display:inline !important;
float:none !important;
font-size: 61.5px;
margin-left: 0px;
font-family: 'Verdana', Arial, sans-serif !important;
width: 100%;
}
.PageList a {
padding-left: 10px;
padding-right: 10px;
transition: background-color 0.5s ease;
color: #FFFFFF;
text-decoration: none !important;
width: 100%;
}
.PageList a:hover {
background-color: #aeadad;
width: 100%;
}
.PageList li.selected {
background-color: #aeadad !important;
text-decoration: none !important;
margin-bottom: -20px !important;
overflow: hidden;
}
1。
相反
.PageList li.selected{
background-color: #aeadad !important;
text-decoration: none !important;
margin-bottom: -20px !important;
overflow: hidden;
}
至
.PageList li.selected a {
background-color: #aeadad !important;
text-decoration: none !important;
margin-bottom: -20px !important;
overflow: hidden;
}
我花了一些时间让我的导航栏高于我的 header 并让它扩展我博客的宽度 Boy Full of Books
但是,我遇到了两个问题。主要问题在博客上很明显——所选选项卡的背景溢出到页面上,而不是与导航栏的其余部分保持一致。另一个问题不是我非常担心的问题,但如果有人有任何指导,那就太好了。缩小或放大时,导航栏中的页面选项卡不随页面大小调整。
下面是我的代码(不是很好,我知道,我还是个新手):
.PageList {
text-align:center !important;
width: 100%;
}
.PageList ul {
margin-top: -42px;
margin-bottom: 0px;
margin-left: -20px;
background-color: #424242 !important;
width: 100%;
}
.PageList li {
display:inline !important;
float:none !important;
font-size: 61.5px;
margin-left: 0px;
font-family: 'Verdana', Arial, sans-serif !important;
width: 100%;
}
.PageList a {
padding-left: 10px;
padding-right: 10px;
transition: background-color 0.5s ease;
color: #FFFFFF;
text-decoration: none !important;
width: 100%;
}
.PageList a:hover {
background-color: #aeadad;
width: 100%;
}
.PageList li.selected {
background-color: #aeadad !important;
text-decoration: none !important;
margin-bottom: -20px !important;
overflow: hidden;
}
1。 相反
.PageList li.selected{
background-color: #aeadad !important;
text-decoration: none !important;
margin-bottom: -20px !important;
overflow: hidden;
}
至
.PageList li.selected a {
background-color: #aeadad !important;
text-decoration: none !important;
margin-bottom: -20px !important;
overflow: hidden;
}