테이블을 쓰지 않고 li태그를 이용해서 가변적인 가로 메뉴를 만드려고 하는데 조언좀 주세요 ㅠㅠ
바람
위와같은 메뉴를 만드려고 합니다. 물론 메뉴는 더 많구요.
가변적이어야 하기 때문에 ul의 폭은 100%를 줬는데요.
그담에 어떻게 해야하는건지 도당체가 미치겠네요.
테이블 같은 경우는 td가 알아서 100%에 맞게 폭을 맞추잖아요.
그런데 li는 그게 안되고. 강제로 퍼센트를 줘봐도 IE에서는 맨 오른쪽 메뉴가 아래로 떨어지더라구요. (스크롤바때문인지는 모르겠지만)
하지만 메뉴를 추가하거나 뺐을 때 자동으로 맞춰지게 만드려고 하는데 방법이 있긴 한가요? ㅠㅠ
게다가 저 가운데 구분선도 문제인게 메뉴가 줄어들면 구분선의 여백도 더 넓어져야 하는데
그 건 또 어떤식으로 컨트롤을 해야하는지 정말 답답합니다.
조언좀 부탁드립니다. ㅠㅠ우선 저렇게 코딩하고 CSS를 줘봤는데 결과물이 크롬과 IE가 틀립니다.
IE
(IE는 위와같이 맨 오른쪽 글자가 내려오네요)
크롬
-
미국녀
위소스 기준으로해서 아래처럼 하셨나요?
#topmenu{width:100%; display:table}
#topmenu li{display:table-cell}
요렇게 기준으로 하고 다른속성들은 추가하시면 될텐데..
그래도 안되면 잘 모르겠어요..ㅎㅎ -
한봄찬
이상하게 ie9쓰는데 table-cell이 ie에서는 안먹네요 ;;;;;
-
진주
브라우저호환성에만 문제없다면,
ul{display:table; width:100%}
li{display:table-cell}
속성 주시면 되지 않을까 싶네요.
ie8부터는 적용되는듯~
* li 에 float:left 는 빼줘야함