导航栏与CSS中的其他元素混淆

问题描述

您好，我有一个导航栏，工作完美。然后我添加了一个灯箱效果。两个工作完美，但是在我的CSS他们正在搞乱。当我添加一些css到灯箱效果到div它弄乱我的导航栏。我认为它与 a 标签有关。我的代码在下面

Hi there i had a nav bar which was working perfectly. Then i added a lightbox effect. Both work perfectly however in my css they are messing up. When i added some css to lightbox effects to the div it messes up my navigation bar. I think its something to do with the a tag. My code is below

Html：

<div id="nav">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#news">Regsiter</a></li>
                <li><a href="#contact">Rules</a></li>
                <li><a href="#about">Photo's</a></li>
                <li><a href="#about">Contact Us</a></li>
            </ul>
</div>


<div class = "lightbox">
     <a href="images/image1.jpg" rel="lightbox[group]"><img src="images/image1t.jpg" /></a>
     <a href="images/image2.jpg" rel="lightbox[group]"><img src="images/image2t.jpg" /></a>
     <a href="images/image3.jpg" rel="lightbox[group]"><img src="images/image3t.jpg" /></a>
     <a href="images/image4.jpg" rel="lightbox[group]"><img src="images/image4t.jpg" /></a>
     <a href="images/image5.jpg" rel="lightbox[group]"><img src="images/image5t.jpg" /></a>
     <a href="images/image6.jpg" rel="lightbox[group]"><img src="images/image6t.jpg" /></a>
</div>

CSS ：

#nav ul
{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}

#nav ul li
{
    float:left;
}

#nav a:link,a:visited
{
    display:block;
    width:163.2px;
    height: 35px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#181818;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    line-height: 35px;
}

#nav ul li a:hover
{
    background-color:#989898;
}

//下面是灯箱CSS

//Below is the lightbox CSS

a
{
    border:3px solid #ccc;
    display:block;
    float:left;
    margin:10px;
}

a img
{
    margin:3px;
}

a:hover
{
    border:3px solid #666;
}
img
{
        display:block;
}

如果我删除灯箱CSS导航栏工作正常。当我添加它，导航栏上的边框和一切都改变了。我认为这是与他们有关的 a 标签，但不确定。谢谢您的帮助。

Like i said. If i delete the light box CSS the nav bar works fine. When i add it, the border on the nav bar and everything changes. I think it something to do with them both having the a tag but not sure. Thanks for the help.

推荐答案

只需在后面的课程前添加 .lightbox lightbox css

just add .lightbox in front of your later classes , the lightbox css

这篇关于导航栏与CSS中的其他元素混淆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！