调整元素大小以适合容器

Question

我有一个里面有一些li元素的ul 。 我如何防止内部元素折断行而不会溢出其容器。

我想我需要调整li元素的font-size和margin 。
但是如何，我不知道。 任何想法解决问题的方法是什么？

请记住，这是一个菜单。

此处的示例： http : //jsfiddle.net/gken6/

Answer 1

我不知道我是否正确理解您的问题，这是否有帮助
但是使用此代码，如果您增加列表中的元素数量，则字体大小会减小以适合容器。
当然，应该改进此代码，但这只是为了给您一个思路
小提琴

<script type="text/javascript">
$(document).ready(function(){
    function decrease () {
        var count=0
        function recursor(count){
                var containerW=$('.container').width()
                var liW=$('.container li').width()
                console.log(liW)
                var nuberLinks=$('.container li').length
                var total=liW*nuberLinks
                if(total>=containerW){
                   $('.container ul').css({'font-size':20-count+'px'})
                    count++
                    recursor(count)
                }
        };
        recursor(0);
    };
    decrease();
})
</script>

如果此解决方案无法满足您的需求，我深表歉意使您浪费时间。