導航欄與CSS中的其他元素搞混了

嗨，我有一個導航欄，它的工作完美。然後我添加了一個燈箱效果。這兩個工作完美，但在我的CSS他們搞亂了。當我添加一些CSS燈箱效果的div它混亂了我的導航欄。我認爲它與a標籤有關。我的代碼如下導航欄與CSS中的其他元素搞混了

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

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標籤但不確定。謝謝您的幫助。

來源

2013-04-03 MadMan

應用燈箱CSS只燈箱內的元素：

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

.lightbox a img{ 
    margin:3px; 
} 

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

演示：http://jsfiddle.net/42BjW/（我沒有燈箱JS，如此明顯的收藏本身是不工作）

來源

2013-04-03 23:32:28 Mooseman

偉大的工作就像一種享受。感謝那 – MadMan 2013-04-03 23:38:32

沒問題。請將我的帖子標記爲未來用戶的「最佳答案」。 – Mooseman 2013-04-03 23:40:37

只需添加.lightbox在你的晚班，燈箱css

來源

2013-04-03 23:34:07 trajce

謝謝你會和你一樣工作 – MadMan 2013-04-03 23:39:39

我很高興它幫助你。如果有幫助，請將答案標記爲答案。 – trajce 2013-04-03 23:45:05

導航欄與CSS中的其他元素搞混了

回答

相關問題