Blogger 页面菜单覆盖了我的代码

Posted 2023-02-16

【中文标题】Blogger 页面菜单覆盖了我的代码

【英文标题】：Blogger page menu overriding my code

【发布时间】：2015-03-18 20:56:07

【问题描述】：

尝试在 Blogger 中组合一个合理的页面菜单，在帖子下方可以构建它，但在标题下方时，它会恢复为模板页面菜单样式。我需要禁用一些代码吗？

我的设计

HTML

<ul id="nav">
  <li><a href="">HOME</a></li>
  <li><a href="x">ONE</a></li>
  <li><a href="x">TWO</a></li>
  <li><a href="x">THREE</a></li>
  <li><a href="x">FOUR</a></li>
</ul>

CSS

#nav 
  display: table;
  height: 64px;
  width: 100%;


#nav li 
  display: table-cell;
  height: 50px;
  width: 16.666666667%;  /* (100 / numItems)% */
  line-height: 64px;
  text-align: center;
  background: #ffffff;
  border-right: 1px solid #fff;
  white-space: nowrap;
  font: 24px raleway
​

@media (max-width: 767px) 
  #nav li 
    display: block;
    width: 100%;
  

我只是把代码放在一起，理解点点滴滴。感谢您的帮助。

【参考方案1】：

尝试将 id nav 更改为任何其他名称，然后也更改 css 引用。检查以下内容，我将其更改为 mynav：

<ul id="mynav">
  <li><a href="">HOME</a></li>
  <li><a href="x">ONE</a></li>
  <li><a href="x">TWO</a></li>
  <li><a href="x">THREE</a></li>
  <li><a href="x">FOUR</a></li>
</ul>

#mynav 
  display: table;
  height: 64px;
  width: 100%;


#mynav li 
  display: table-cell;
  height: 50px;
  width: 16.666666667%;  /* (100 / numItems)% */
  line-height: 64px;
  text-align: center;
  background: #ffffff;
  border-right: 1px solid #fff;
  white-space: nowrap;
  font: 24px raleway
​

@media (max-width: 767px) 
  #mynav li 
    display: block;
    width: 100%;
  

【讨论】：

我试过了 - 它不起作用，我不知道为什么，因为我什至取出了导航栏小部件的默认代码。