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

페이지에 링크를 제공 할 수 있습니까? –

http://www.mozazdesign.co.cc/ – MozazDesign

은 어떻게됩니까 : 17px를; 난 당신이 더 적은 마진 오른쪽을 추가해야합니다 마지막 요소로 생각

출처

2010-07-23 12:44:31

마진 권리는 다른 단어에 간격을 추가하는 것입니다. 그것이 줄어들면 네비게이션이 잘못 배치되는 일은 없습니다. http://i32.tinypic.com/3el21.png 모든 텍스트가 왼쪽 행에서 약 5 픽셀 떨어져 있고 인라인으로 표시되도록하고 싶습니다. – MozazDesign

당신은 감소하는 것을 시도해야

"글꼴 크기 : 18px를;" 및/또는 "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에서 잘못 배치 된 내비게이션

답변

관련 문제