가변 간격의 액체 수평 UL 기반 메뉴

Question

PreNote : 이것은 중복되지 않습니다. 나는 몇 가지 질문을 점검하고 나의 세부 사항은 다르다.

나는 현재 웹 페이지에이 같은 수평 탐색 메뉴가 있습니다 :

메뉴는 UL 요소입니다. 문제는 현재 li 사이의 간격을 확보하기 위해 명시 적으로 마진을 지정해야한다는 것입니다. 가능한 경우 간격을 60px로 지정하고 브라우저가 축소되어 더 이상 큰 메뉴 간격을 허용하지 않을 때마다 간격을 좁히고 싶습니다.

어떻게하면됩니까?

Answer 1

나는 당신이 위버 - 거룩한 우버 그레이 일을 찾고 있다고 생각합니다. 어쩌면 틀렸을 수도 있지만 CSS만으로는 가능하지 않다고 생각합니다. 너비가 최대 인 것처럼 최대 여백 같은 것이 없기 때문입니다. 그리고 JS (예를 들어 jQuery)를 사용하면 JS가 페이지가로드되고 준비 될 때까지 기다렸다가 너비 값을 계산하기 시작해야하기 때문에 일종의 위치 지정 점프가 발생합니다.

조금 다른 점을 기꺼이하고자한다면. 윈도우 크기와 결합 된 전체 네비게이션의 최대 너비를 정의한 다음 최신 브라우저에서 CSS를 사용하는 것이 좋습니다. modernizr.com을 사용하는 경우 IE8 용 CSS로 분기하여 display : table, table-row, table-cell을 대신 사용할 수 있습니다. IE7에서는 float 만 사용합니다.

현대적인 브라우저에서 디스플레이 : 테이블을 사용하지 않는 이유는 무엇입니까? 어쩌면 같은 모양 일지 모르지만 플렉스와 테이블에서 요소 간의 마진 차이가 다릅니다. 플렉스 내의 요소들 사이의 간격이 반드시 동일 (즉, 화소 현명)이지만, 이들은

table 
+--------------------------------+---------+ 
|  wide content in here  | short | 
+--------------------------------+---------+ 
    6px      6px 2px 2px 


flex 
+----------------------------+-------------+ 
| wide content in here | short | 
+----------------------------+-------------+ 
    4px      4px 4px  4px