1

所以我建立了一个导航菜单，它调整每个 li 的大小以适应 js 菜单的整个宽度。

$(function() {

    changeWidth(500);

    function changeWidth(menuWidth){
        var menuItems = $('#menu li').size();
        var itemWidth = (menuWidth/menuItems)-2;

        $('#menu').css({'width': menuWidth +'px'});
        $('#menu a').css({'width': itemWidth +'px'});
    }
});

这里设置得很好http://jsfiddle.net/MZ2wt/

我想知道是否有办法将宽度设置为 100%，而不必声明绝对宽度（目前为 500px）？

谢谢！

4

5 回答 5

1

这是一个更好的小提琴：http: //jsfiddle.net/MZ2wt/2/

实际上，它所做的只是获取<body>宽度并对此进行判断。但是请记住，如果您的元素不是body. 因此，如果我是你，我会传递对你正在调整大小并调用的元素的引用，$(this).parent().width()而不是$("body").width()

于 2012-11-28T11:50:18.267 回答
1

在 CSS 中将菜单设置为 100%。然后更改您的函数，使其测量菜单的宽度，然后调整<li>元素的大小以适应测量的宽度。

您还可以更改设置宽度的位置以使用该width()方法而不是该css()方法，这样您就不必将宽度连接到px末尾的字符串中

您还可以添加一个调整大小处理程序，在调整窗口大小时调用您的函数......

于 2012-11-28T11:50:45.013 回答
1

查看 jsFiddle，您希望 LI 的宽度等于 UL 的宽度除以 LI 的数量吗？

我已经更新了你的 jsFiddle。基本上，我已将 LI 设置为向左浮动而不是内联显示。内联元素不能设置宽度。我已将 LI 设置为具有文本对齐中心，并从 A 左侧移除浮动并将其放在 LI 上。

http://jsfiddle.net/MZ2wt/13/

$(function() {
    var lis = $('#menu ul li');
    lis.css('width', ($('#menu ul').outerWidth() / lis.length) + 'px');
});
于 2012-11-28T11:58:46.640 回答
1

你可以在这里做类似的 演示

$（函数（）{

changeWidth(100);// could be setted in CSS

function changeWidth(menuWidth){
    $('#menu').css({'width': menuWidth +'%'});
    var menuWidth =  $('#menu').width();
    var menuItems = $('#menu li').size();
    var itemWidth = (menuWidth/menuItems)-2;

   $('#menu a').css({'width': itemWidth +'px'});
} });

添加一个监听器来调整窗口大小也可能很有趣。​</p>

于 2012-11-28T12:02:56.520 回答
0 
.codropsmenu1{
    width:100%;
    padding:3px;
    height:30px;
    background-color:#282828;
}

在 codropsmenu1 类上添加宽度：100% 并且不为菜单设置宽度

$(function() {

    changeWidth();

    function changeWidth(){
        var menuItems = $('#menu li').size();
        var menuWidth = $('#menu').width();
        //alert(menuWidth);
        var itemWidth = (menuWidth/menuItems)-2;

        //$('#menu').css({'width': menuWidth +'px'});
        $('#menu a').css({'width': itemWidth +'px'});
    }
});
于 2012-11-28T11:52:27.203 回答