0

到目前为止我有这个代码。但这并没有达到我的预期。我希望整个 ul 块都用 li 的宽度填充。如果你有 3 里，那将是 100/3。如果你有 4 里，那将是 100/4，依此类推。

<!DOCTYPE html>
<html>
<head>

<title>Hello</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script language = "javascript" type="text/javascript">
  $(function(){
    var width = $("#menu").width();
        var res = Math(width / $("#menu li"));
    $("#menu li").width()= res;
  });
</script>

</head>


<ul id = "menu">
    <li><img src="img/mooo.jpg" /></li>
    <li><a href ="#">Home</a>
        <ul class = "sub1">
            <li><a href ="#">News</a></li>
        </ul>
    </li>
    <li><a href ="#">soccer</a>
        <ul class = "sub1">
            <li><a href ="#">goal</a></li>
            <li><a href ="#">ball</a></li>
            </ul>
    </li>
    <li><a href ="#">Contacts</a></li>
</ul>

<div id "main">
<h2> Goal </h2>
</div>

4

4 回答 4

1

您应该使用.length来获取所选元素的计数。

但你应该只检查直接孩子..

所以

$(function(){
    var menu = $('#menu'),
          children = menu.children();

    children.width( menu.width() / children.length );
});

当然，您必须将边距/填充设置为 0 才能正常工作..

于 2013-10-07T21:42:13.293 回答
1 
(function( $ ){
  $.fn.autowidth = function() {
    return this.each(function() {        
        $('li', this).css({'width' : (100 / $('li', this).length) + '%'})
    });
  };
})( jQuery );

$(document).ready(function(){
    $('nav > ul').autowidth();    
});

代码笔示例

只需要box-sizing:border-box

于 2013-10-07T21:50:38.817 回答
0 
var li_n = $('#main').children().length;
var total_width = $('#main').width();
$('#main li').each(function() { 
    $(this).width(total_width/li_n + '%');
});

我猜这就是你要找的。

于 2013-10-07T21:26:43.843 回答
0

这是你想要的？见小提琴 - http://jsfiddle.net/taneleero/TnXUm/

var count = 0;

$('li').each(function(){
    count++;
});

$('li').css('width', $('ul').width()/count);
于 2013-10-07T20:39:17.637 回答