<li> с адаптируемой шириной, используя Jquery

Question

Я пытаюсь создать гибкое горизонтальное меню, которое всегда будет иметь общую ширину 100%. Независимо от количества меню меню.

Я предполагаю, что мне нужен скрипт, который будет читать число li, делить это число на ширину ul и устанавливать результат как ширину li ..?

По сути, я надеюсь эмулировать функциональность нового css3 "box-flex", как описано в этом посте, только с помощью Jquery.

" элементы с адаптированной шириной "

Answer 1

У вас будут проблемы с округлением.Таким образом, у вас останется свободное место слева или справа.

Попробуйте это, что дает вам 2 варианта, исправьте меню на% или на px:

function fixMenuPX()
{
    var parent = $("ul"),
        pWidth = parent.width(),
        chLength = parent.children().length,
        chWidth = Math.floor(pWidth / chLength);

    children.css({ width : chWidth });   
}

function fixMenuPerc()
{
    var parent = $("ul"),
        chPerc= 100 / parent.children().length;

    children.css({ width : chPerc + "%" });   
}

fixMenuPerc();

Попробуйте эту скрипку: http://jsfiddle.net/VGdNB/

Answer 2

вы можете попробовать что-то вроде

$(document).ready(function(){
  var count = $('li').length;
  var width = 100/count;
  $('li').css("width",width+"%");
});