Question

我还在学习，可以使用一些帮助来确定我的代码中的一个非常简单的错误。任何帮助将不胜感激！

我正在一个网站上工作，导航栏开始时是一个带有公司徽标的小中心框，下面是“导航”一词，还有一个小的“＆gt;”标志右侧的箭头。

当您将鼠标悬停在框上时，它会扩展为更宽的矩形，并在最左侧显示扩展徽标。 “导航”这个词仍然在它之下，但箭头消失了。我使用Dreamweaver的“行为”面板完成了徽标交换和隐藏箭头。对于我使用的扩展导航框：悬停。

现在，我想要的是在展开框时会出现4个导航链接，我再次使用“行为”完成。我遇到的问题是链接出现在框下方而不是在框内。我一直在网上搜索几个小时，我正在尝试的任何工作都没有。

<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>

Edit: Here is what is happening now that I changed the display on .Nav and #Navlinks to inline

Answer 1

所需要的只是以下内容来解决这个问题：

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

因此，在段落没有阻止并且列表没有为子弹点腾出空间之后，显示在与“导航”相同的行上并且到处遇见“导航”。

此外，如果您需要，可以将transition: width 1s ease;添加到.Navbox以实现平滑过渡。

如何将导航中的链接与其他内容对齐？

1 个答案: