묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
css 도움좀 요청합니다.
2015.01.03 16:14
http://lifeto.cafe24.com/xe/test
위 사이트에서 드롭다운 메뉴를 만들던 도중 css를 망쳐버렸는데,
어찌 된 이유인지 메뉴가 거꾸로된 순서대로 나타나네요
(원래는 today, 공지사항, commuity, test 순인데, 거꾸로 정렬되어있습니다 )
또, 롤오버하는 뜨는 세부메뉴 위치를 메뉴 바로 아래쪽에, 그리고 세로로 정렬되게 고쳐야합니다
도움 부탁드립니다.
댓글 3
-
시니시즘
2015.01.03 16:30
-
XESTUDIO
2015.01.03 16:45
빠르고 전문적인 답변 감사합니다. 제가 이해를 잘 못할 정도로 잘? 설명해주셨어요. ^^;
다만 하위메뉴에 text-align 적용이 안되네요.
또, 세부메뉴가 가로가 아닌 세로로 정렬할 수 있는 방법은 없나요? css가 워낙복잡하기 감을 잘 못잡겠네요.
조금만 더 구체적으로 설명해주실 수 있나요?
-
시니시즘
2015.01.03 16:46
그건 님이 하셔야죠. 하나하나 다 대답해주길 바라면 실력은 안늡니다.
float을 사용하시고 싶어하시는 것 같은데 님은 아래 코드에서 각 li에 float: right를 적용하셨습니다. 그러면 순서가 역순으로 정렬되게 됩니다. li가 아니라 ul에 float: right를 적용하시고, li에는 float: left를 적용하셔야 합니다. 허나, float을 사용하실 때는 넓이 값이 상당히 중요한데 님처럼 각 메뉴가 자유자재의 넓이 값을 가지고 있을 때 ul이 자식 넒이에 딱 맞는 넓이 값을 알지 못해 오른쪽에 딱 맞아 떨어지지 않게 되죠. 그럴때는 li에 display: inline-block을 적용하시고, ul에 text-align: right를 적용하시면 됩니다. 단, inline-block을 사용하실 때는 완벽한 pixel값을 얻기 힘들다는 것을 아셔야 합니다. <li></li><li></li> 각 li 요소 사이에 공백이나 엔터값이 들어가있으면 3px 정도 넓이의 마진이 생기는 점 유의하시기 바랍니다. (이러한 이유로 inline-block이 많이 사용되지 않기도 합니다.)