Question

到目前为止我有这个代码。但它并没有达到我的预期。我希望整个ul块用li的宽度填充。如果你有3个li是100/3。如果你有4个li是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>

Answer 1

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

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

所以

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

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

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

Answer 2

(function( $ ){
  $.fn.autowidth = function() {
    return this.each(function() {        
        $('li', this).css({'width' : (100 / $('li', this).length) + '%'})
    });
  };
})( jQuery );

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

Codepen Example

仅需要box-sizing:border-box

Answer 3

这是你在找什么？请参阅小提琴 - http://jsfiddle.net/taneleero/TnXUm/

var count = 0;

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

$('li').css('width', $('ul').width()/count);

Answer 4

var li_n = $('#main').children().length;
var total_width = $('#main').width();
$('#main li').each(function() { 
    $(this).width(total_width/li_n + '%');
});

我猜这就是你要找的东西。

Jquery调整li以适应ul

4 个答案: