수평 너비 메뉴 - 동적 너비가있는 동적 너비

가로 메뉴의 너비를 부모 div의 너비에 맞게 조정하는 데 도움이 필요합니다.수평 너비 메뉴 - 동적 너비가있는 동적 너비

문제는 UL의 목록 항목이 동적이기 때문에 기록 여부, 페이지에 가입 여부 및 조합 여부에 따라 다양한 조합이 있습니다. 관리자.

UL을 상위 div의 100 %로 설정했습니다. 이것은 잘 작동합니다. 현재 내 lis는 모두 왼쪽 정렬입니다. http://www.daddyleagues.com/OzeSportsCFM (홈 코치 통계 등의 섹션입니다)에서 볼 수 있습니다.

문제는 내가 CSS 오버라이드와 JS를 사용하여 편집하는 것입니다 등). 목록이 결정되면 너비를 조정할 수 없습니다. 난 그냥 항목이 표시 내용에 따라 %의 폭을 추가 일부 자바 스크립트 함수를 생성 할 수 있습니다 리튬의 계산 내가 생각하고

자신 % 만들 수있는 마법의 방법이 있는지

그래서 궁금입니다. 이것은 누군가가 좀 더 쉬운 길을 가기를 바라는 최후의 수단입니다.

감사

출처

2014-09-11 applaps

데모를 게시 할 수 있습니다. –

은 부트 스트랩에서 정당화 된 네비게이션을 보았습니다. http://getbootstrap.com/components/#nav-justified – Exlord

당신은 CSS3 flexbox을 사용할 수 있습니다.

ul{ 
display:flex; 
justify-content: space-around; 
}

는 caniuse

출처

2014-09-11 04:30:17

flexbox에 대한 좋은 호소! 그러나 IE 지원은 이상적이지 않습니다. http://caniuse.com/#feat=flexbox Google은 브라우저 지원 요구 사항을 알지 못합니다. –

와우, 굉장해! 그래서 저는 60 행짜리 javascript 함수보다 훨씬 좋았습니다. 저는 정당화 된 내용을 사용했습니다 : 중심은 공간이지만 주위는 거슬리는 공간으로, 실제로는 더 넓게 보입니다 ... 공간을 확보 할 수있는 방법이 있습니까? 리스를 빼고 둘 사이에 패딩이 없습니까? http://i.imgur.com/gRMB7sQ.png – applaps

@css-tricks

인 flexbox 브라우저 지원 @ 인 flexbox 대해 자세히 알아 목록의 상위 요소 (UL), 답변을 위해 "메뉴"를 호출 할 수 있습니다 얻을.

var menu = document.getElementById('menu'), 
    width = 100/menu.length; 

Array.prototype.slice.call(menu.children).forEach(function(li) { 
    li.setAttribute('style', 'width:' + width + '%;'); 
});

출처

2014-09-11 04:32:39

수평 너비 메뉴 - 동적 너비가있는 동적 너비

답변

관련 문제