当前位置：文江博客话题详情

主站点导航与博客脚本 CSS 发生冲突

发布于 2024-12-20 16:52:19 字数 239 浏览 1 评论 0原文

www.test.webitry.net 是我安装在博客上的主站点导航和标题脚本以便将其与主站点集成。主站点导航被穿过链接的白线阻碍，并且也影响了翻转。请参阅附图。在此处输入图像描述

可能导致此冲突的原因是什么？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

童话里做英雄 2024-12-27 16:52:19

有序列表标记 (

标签。

尝试删除这里的 border-bottom...

.nav ol {
list-style: none;
width: 950px;
margin: 0 auto;
padding: 0;
padding: 0;        /* <----- you can also remove this line since it's a duplicate */
background-color: #3b3b44;
border-top: 1px solid #ccf;
border-bottom: 1px solid #ccf;  /* <---- remove this line    */
}

如果你不想要白线，它不应该出现在 CSS 中。

此外，您的所有链接样式都在底部带有边框，您可能需要专门为导航链接设置该属性，以便不会“拾取”常规锚点属性。

.nav li a {
display: block;
padding: 2px 20px;
text-decoration: none;
font-family: Helvetica, arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #fff; 
border-right: 1px solid #ccf; 
border-bottom: none;  /* <------------ add this line */
}

You have a break tag (<br style="clear:both" />) inside the ordered list tag (<ol>) that's malformed HTML and should not be done. The only tags which should be inside an <ol> tags are <li> tags.

Try removing the border-bottom here as well...

.nav ol {
list-style: none;
width: 950px;
margin: 0 auto;
padding: 0;
padding: 0;        /* <----- you can also remove this line since it's a duplicate */
background-color: #3b3b44;
border-top: 1px solid #ccf;
border-bottom: 1px solid #ccf;  /* <---- remove this line    */
}

If you don't want the white line, it shouldn't be in the CSS.

In addition, you have all links styled with a border on the bottom, you may need to specifically set that attribute for the navigation links so the general anchor properties are not "picked up".

.nav li a {
display: block;
padding: 2px 20px;
text-decoration: none;
font-family: Helvetica, arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #fff; 
border-right: 1px solid #ccf; 
border-bottom: none;  /* <------------ add this line */
}

回复收藏 0 原文

~没有更多了~