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

时间:2015-06-03 15:41:43

标签: html css navbar blogger

我已经花了一些时间将我的导航栏放在我的标题上方并让它在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 个答案:

答案 0 :(得分:0)

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;
}
  1. 使用https://developer.mozilla.org/es/docs/CSS/Media_queries