2013-06-03 2 views
2

메뉴 모음을 중앙에 놓고 메뉴 모음을 텍스트에 맞추려고합니다. 저는 여기에 편집하기 위해 노력하고있어 웹 사이트입니다 : http://www.graffitisumperk.g6.cz/blog/메뉴 모음 너비를 변경하십시오.

내가했습니다 이미 내가 이런 식으로 메뉴 항목을 중심으로 수 알아낼 :

.menu { 
    text-align:center 
} 
.menu li { 
    display:inline-block; 
    float:none; 
    margin-left: -5px; 
} 
.menu li li { 
    display:block; 
    text-align:left 
} 

을하지만 메뉴에 맞게 보일 수 없다 막대를 메뉴 항목 너비에 맞 춥니 다. 는 나는 그것이 445px 여야 계산하지만이 변경 될 때이했습니다

#container { 
    margin: 0 auto; 
    max-width: 960px; 

445px에 전체 페이지가 아닌 메뉴 표시 줄에 영향을 미쳤다. 아이디어를 고치는 방법은?

답변

2

매우 비슷한 방법으로 할 수 있습니다 :). display: inline-block;의 효과 중 하나는 요소가 자식을 포함하도록 크기를 조정하려고 시도한다는 것입니다. 당신은 float 또는 position: absolute으로 이것을 달성 할 수 있습니다, 그러나 그것들은이 레이아웃에 정말로 맞지 않습니다.

.main-nav { text-align: center; } 
.menu { display: inline-block; } 

난 당신이 메뉴를 중심으로 할 수 있습니다 추측, 그래서 나는 너무 text-align을 추가했습니다.

: 브라우저의 관리자 (모든 최신 브라우저는 꽤 괜찮은 브라우저)를 사용하면 쉽게 변경할 요소를 파악할 수 있습니다.

+0

답장을 보내 주셔서 감사합니다. bažmegakapa. CSS에 줄을 추가하려고했지만 페이지가 똑같아 보입니다. 이 행을 교체했습니다. '.main-nav { \t clear : both; } ' with this '.main-nav {text-align : center; }' 그리고 추가 된 '.menu {display : inline-block; }' 내가 뭘 잘못 했니? –

+0

@ AlešKroutil 행동으로 보지 않고도 말하기가 어렵습니다. 데모를 게시 할 수 있습니까? – kapa

+0

나는'.main-nav {text-align : center; } .menu {display : inline-block; }'Wordpress 테마 설정의 Custom CSS Style 필드에 추가하십시오. 당신은 그것을 바로 여기에서 볼 수 있습니다. [link] (http://www.graffitisumperk.g6.cz/) –

0

페이지를 살펴보면 실제로 변경해야하는 부분이 "기본 탐색"클래스 인 것처럼 보입니다.

#container div에는 전체 페이지가 포함되어 있으므로 그 페이지를 엉망으로 만들고 싶지는 않습니다.