탐색 메뉴를 컨테이너에 맞게 만들려면 어떻게해야합니까? [가로]

Question

나는이 머리카락을 찢어 내고 있습니다. 기본적으로 메뉴의 내용에 따라 컨테이너를 가로로 맞추기 위해 내 메뉴가 필요합니다. 따라서 table 및 table-cell 속성이이를 이해할 수 있습니다. 그러나 이것을 Superfish Menu과 함께 사용하면 컨테이너에 맞게 확장 할 수 없습니다.

또한 table-cell은 완전히 무시하는 메뉴 사이에 여백/공간이 필요합니다.

Answer 1

두 가지 중 하나를 수행해야합니다. 모든 메뉴 항목을 일정한 크기로 만드는 것은 크기를 하드 코딩했기 때문에 컨테이너를 채우는 가장 쉬운 방법입니다.

다른 옵션은 UL의 너비와 부모 div의 너비의 차이를 결정한 다음 몇 가지 javascript를 만든 다음 패딩을 늘려 해당 요소를 균등하게 배분하는 것입니다. 그 이유는 LI가 그 내용에 적합하기 때문입니다. 전체 메뉴를 확장하려면 내용을 확장해야합니다. 당신은 내가 여기서 어떻게하는지 볼 수 있습니다. 뿐만 아니라 마지막 메뉴 항목 후 간격을 취소합니다 귀하의 CSS에 다음을 추가 http://jsfiddle.net/Nilpo/GGQ4V/3/

$(window).load(function() { 

var container = $('div.menu-main-menu-container'); 
var menu = $('ul.menu'); 

var difference = container.width() - menu.width(); 

if (difference > 0) { 
    var count = menu.children().length; 

    var pad = (difference/count)/2; 

    var total = 0; 
    menu.children().each(function(){ 
     var el = $(this); 
     var lpad = parseInt(el.css('padding-left'), 10); 
     var rpad = parseInt(el.css('padding-right'), 10); 

     el.css('padding-left', lpad+pad); 
     total += lpad+pad; 

     if ((total+rpad+pad) < difference) { 
      el.css('padding-right', rpad+pad); 
     } else { 
      el.css('padding-right', Math.floor(rpad+pad)); 
     } 
     total += rpad+pad; 
    }); 
} 
}); 

.

.menu li:last-child { 
    margin:0; 
} 

편집 :이 향후 마진 변경을 중단하지 않도록 당신은 아마 오른쪽 여백을 변경해야합니다.

.menu li:last-child { 
    margin-right: 0; 
} 

Answer 2

http://jsfiddle.net/TUQpV/10/은 그냥 .menu li 규칙에서 float: left;을 제거

체크 아웃 여기에 바이올린 데모를. 그 이유는 li을 왼쪽으로 플로팅하면 기본적으로 스쿼시 비트가됩니다. 공간이 있어도 오른쪽으로 확장되지 않기 때문입니다. 데모 작업 버전 : little link.

희망이 도움이되었습니다!