Blogger中选定的页面选项卡背景溢出

I've spent a bit of time on getting my navbar above my header and getting it to spread the width of my blog at Boy Full of Books

我已经花了一些时间将我的导航栏放在我的标题之上并让它扩展我的博客的宽度在Boy Full of Books

However, I'm having two problems. The main problem is evident on the blog - the selected tab's background is overflowing on to the page and not staying with the rest of the navbar. The other problem isn't one I'm terribly worried about, but if anyone has any guidance it'd be great. When zoomed out or in, the page tabs in the navbar don't adjust with the size of the page.

但是，我有两个问题。主要问题在博客上很明显 - 所选标签的背景溢出到页面上，而不是留在导航栏的其余部分。另一个问题不是我非常担心的问题，但如果有人有任何指导，那就太好了。缩小或缩小时，导航栏中的页面选项卡不会根据页面大小进行调整。

Below is my code (it's not great, I know, I'm still a novice):

下面是我的代码（它不是很好，我知道，我还是新手）：

.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 个解决方案

#1

1. instead

相反

.PageList li.selected{
  background-color: #aeadad !important;
  text-decoration: none !important;
  margin-bottom: -20px !important;
  overflow: hidden;
}

to

至

.PageList li.selected a {
  background-color: #aeadad !important;
  text-decoration: none !important;
  margin-bottom: -20px !important;
  overflow: hidden;
}

2. use https://developer.mozilla.org/es/docs/CSS/Media_queries
3. 使用https://developer.mozilla.org/es/docs/CSS/Media_queries