2012-02-12 3 views
0

div 안에 탐색 링크를 중심에두고 수평으로 정렬해야합니다. 이 방법을 시도했지만 작동하지 않았습니다.내비게이션을 수평으로 정렬하고 중앙에 배치하는 방법은 무엇입니까?

감사합니다. #centermenu로 이전 오류가 수정되었지만, stil이 작동하지 않습니다.

  <nav id="centermenu"> 
        <ul> 
         <li><a href="#">Business</a></li> 
         <li><a href="#">Specialities</a></li> 
         <li><a href="#">Contact us</a></li> 
        </ul> 
      </nav> 

CSS :

#centermenu { 
float: left; 
width: 100%; 
border-bottom: 2px solid #011; 
background: #ffe; 
overflow: hidden; 
position: relative; 
} 

#centermenu ul { 
float: left; 
clear: left; 
position: relative; 
list-style: none; 
display: block; 
text-align: center; 
} 


#centermenu ul li { 
display: block; 
float: left; 
list-style: none; 
margin: 1em; 
padding: 1em; 
} 

감사

답변

2

은 UL 부분에서 입력 오류가있는 것 같습니다.

Cetermenu ul 

대신 편집
Centermenu ul 

떨어져 :

다음은 나를 위해 작동하는 것 같다. 어쩌면 다른 태그를 하나씩 추가하여 끊어 지는지 확인하십시오.

#centermenu { 
float: left; 
width: 100%; 
    text-align: center; 
border-bottom: 2px solid #011; 
background: #ffe; 
overflow: hidden; 
position: relative; 
} 

#centermenu ul { 
margin: 2 auto; 
display: block 
} 


#centermenu ul li { 
display: inline; 
text-align: center; 
margin: 1em; 
padding: 1em; 
} 
+0

는 #centermenu, 덕분에 이전 오류를 수정했습니다,하지만 STIL 작동하지 않습니다. 왼쪽을 제거 : 50 % 선언뿐만 아니라, 아무것도. –

1

변화 왼쪽 50 %에서 25 %

http://jsfiddle.net/ZW9Qp/

#centermenu { 
    float: left; 
    width: 100%; 
    border-bottom: 2px solid #011; 
    background: #ffe; 
    overflow: hidden; 
    position: relative; 
    } 
    #centermenu ul { 
    float: left; 
    clear: left; 
    position: relative; 
    list-style: none; 
    left: 25%; 
    display: block; 
    text-align: center; 
    } 
    #centermenu ul li { 
    display: block; 
    float: left; 
    list-style: none; 
    margin: 1em; 
    padding: 1em; 

} 
+0

고마워,하지만 꽤 middel 아니지만, 조금 더 철저히 구글해야합니다. 건배 –

관련 문제