導航在html/css中的位置錯誤

我正在編碼我的新投資組合，導航位置錯誤，我找不到原因。導航在html/css中的位置錯誤

http://i26.tinypic.com/25psi10.png

我希望文本與側面的線條是內聯，而是它移動到右側和向下，它爲什麼做這個，我想不通。

這是有關編碼：

body { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    background:url('images/Background.png'); 
 
    font-family: century gothic; 
 
} 
 

 
#nav a { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 
#container { 
 
    margin: 0 auto; 
 
    width: 960px; 
 
} 
 

 
#logo { 
 
    background:url('images/Logo.png'); 
 
    height: 340px; 
 
    width: 524px; 
 
    float: left; 
 
    margin-left: 0px; <!--check--> 
 
} 
 

 
#nav { 
 
    background:url('images/Nav_Container.png'); 
 
    width: 427px; 
 
    height: 33px; 
 
    float: right; 
 
    margin-top: 100px; 
 
    padding: 0px; 
 

 
} 
 

 
#main_nav li { 
 
    list-style: none; 
 
    display: inline; 
 
    font: 18px century gothic, sans-serif; 
 
    color: white; 
 
    margin-right: 18px; 
 
    padding: 0px; 
 
}

<html> 
 
    <head> 
 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
    <link href="styles.css" rel="stylesheet" type="text/css" /> 
 
    <title>MozazDesign Portfolio</title> 
 
    </head> 
 

 
    <body> 
 

 
    <div id="container"> 
 
     <div id="header"> 
 
     <div id="logo"> 
 

 
     </div><!--end logo--> 
 

 
     <div id="nav"> 
 
      <ul id="main_nav"> 
 
      <li><a href="#">home</a></li> 
 
      <li><a href="#">about me</a></li> 
 
      <li><a href="#">gallery</a></li> 
 
      <li><a href="#">blog</a></li> 
 
      <li><a href="#">contact</a></li> 
 
      </ul><!--end main nav--> 
 
     </div><!--end nav--> 
 
     </div><!--end header--> 
 
    </div> 
 
    </body> 
 
</html>

來源

2010-07-23 MozazDesign

你能給出一個鏈接到你的頁面嗎？ – 2010-07-23 12:43:51

http://www.mozazdesign.co.cc/ – MozazDesign 2010-07-23 12:58:09

時降低保證金權會發生什麼：知識+;

我相信你的最後一個元素，你應該少加保證金右

來源

2010-07-23 12:44:31

右邊距是爲不同單詞增加間距。當它減少時，它對定位錯誤的導航沒有任何影響。 http://i32.tinypic.com/3el21.png 我希望所有的文字距離左邊線大約5px，並且它是內嵌的。 – MozazDesign 2010-07-23 13:01:51

你應該儘量減少「FONT-SIZE：18像素;」和/或「margin-right：17px;」直到文本按照你的意願定位。

[更新]也嘗試添加

#main_nav { float: left; }

有在鏈接的位置更好的控制。 [更新]

來源

2010-07-23 12:49:01 Nick

-1

而不是增加保證金的權利，請嘗試將無形的間隔，像這樣的：

<div id="nav"> 
    <ul id="main_nav"> 
    <li><a href="#">home</a></li> 
    <li>&nbsp;</li> 
    <li><a href="#">about me</a></li> 
    <li>&nbsp;</li> 
    <li><a href="#">gallery</a></li> 
    <li>&nbsp;</li> 
    <li><a href="#">blog</a></li> 
    <li>&nbsp;</li> 
    <li><a href="#">contact</a></li> 
    </ul><!--end main nav--> 
    </div><!--end nav-->

這樣，你不跟在最後不需要的間距拉閘。如果您喜歡，請提供間隔符類名，並設置它們的大小直到它們恰到好處。

來源

2010-07-23 12:52:44 Robusto

這很可能是您的ul和li項目的默認填充/邊距。嘗試將CSS中的所有東西都清零，然後將其慢慢添加回來，直到找到菜單佈局中斷的位置：

#main_nav, 
#main_nav li { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

#main_nav li { 
    display: inline; 
    margin-right: 17px; /* lower this value and see if that fixes the layout */ 
    font: 18px century gothic, sans-serif; /* specify a fall back font that's at least the same type as century gothic */ 
    color: white;   
}

來源

2010-07-24 03:04:56 Pat

導航在html/css中的位置錯誤

回答

相關問題