如何獲取導航中的鏈接以使其與其他內容對齊？

Question

我仍在學習，可以對我確信這是我的代碼中一個非常簡單的錯誤提供幫助。 任何幫助將不勝感激！

我正在一個網站上瀏覽網站，導航欄開始時是一個帶有公司徽標的居中小框，其下方是“導航”字樣，徽標右側有一個小“>”箭頭。

當您將鼠標懸停在該框上時，它會擴展為一個更寬的矩形，最左側帶有一個擴展的徽標。 “導航”一詞仍在其下方，但箭頭消失了。 我使用Dreamweaver的“行為”面板完成了徽標交換和隱藏箭頭。 對於擴展的導航框，我使用了：hover。

現在，我想要的是在擴展該框時出現4個Nav鏈接，我再次使用Behaviours完成了此操作。 我遇到的問題是鏈接顯示在框的下方而不是框的內部。 我已經在網上搜索了幾個小時，但我沒有嘗試任何工作。

屏幕截圖

 <script type="text/javascript"> function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_showHideLayers() { //v9.0 var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3) with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; } obj.visibility=v; } } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> 

 Header { background-color: #525252; height: 110px; width: 100%; margin: 0 auto; margin-top: -8px; text-align: center; } /*---------------------------Header End--------------------------*/ /*---------------------------NavBar Begin--------------------------*/ .Navbox { background-color: #BC1316; height: 105px; width: 100px; margin: 0 auto; margin-top: -8px; padding-left: 10px; padding-right: 0px; text-align: left; } .Navbox:hover { width: 480px; text-align: left; padding-left: 10px; padding-right: 0px; } .Nav { margin-top: 0; } #NavArrow { font-size: 18pt; float: right; margin-right: 8px; margin-top: 40px; margin-bottom: 0; } a { text-decoration: none; color: black; } #Navlinks { } .navlink { display: inline; position: relative; } 

 <header> <nav> <div class="Navbox" onMouseOver="MM_showHideLayers('NavArrow','','hide');MM_swapImage('Image1','','img/ja-films-logo.gif',1);MM_showHideLayers('Navlinks','','show')" onMouseOut="MM_showHideLayers('NavArrow','','show');MM_swapImage('Image1','','img/ja-logo.gif',1);MM_showHideLayers('Navlinks','','hide')"> <a href="index.html"><img src="img/ja-logo.gif" id="Image1"/></a> <p id="NavArrow">&#62;</p> <p class="Nav">Navigation</p> <ul id="Navlinks"> <li class="navlink"><a href="#">About</a></li> <li class="navlink"><a href="#">Portfolio</a></li> <li class="navlink"><a href="#">Current Projects</a></li> <li class="navlink"><a href="#">Contact</a></li> </ul> </div> </nav> </header> 

編輯：這是現在發生的事情，因為我將.Nav和#Navlinks上的顯示更改為嵌入式

Answer 1

以下是解決該問題的所有方法：

.Nav {
   margin-top: 0;
   display: inline;
}
#Navlinks {
  list-style-type: none;
  display: inline;
  margin-left: -40px ;
}  

為了使該段不會被阻塞並且該列表不會為項目符號留出空間，請在與“導航”相同的行上顯示並四處滿足“導航”。

另外，如果您願意，可以添加transition: width 1s ease; 到.Navbox的平滑過渡。