Question

我正在建立一个网站，导航项目可以改变很多。我想做的是JavaScript或类似的东西来获取我拥有的导航项目的数量，将其发送到我的CSS文件并将导航的宽度除以项目的数量，然后将其分配给.head的宽度李。如果有人能提供帮助那就太棒了！

问候，杰登

Answer 1

你不能用纯/原生CSS做到这一点。所以，我可以看到两个解决方法：

您可以使用Less Framework

其他方式，您需要使用Javascript来执行此操作，例如：

HTML

<ul id="myList">
    <li>My Nav 1</li>
    <li>My Nav 2</li>
    <li>My Nav 3</li>
    <!-- My Nav (...) N -->
</ul>

Javascript / jQuery

$(function() {
    var myFullWidth = 600; // define your full width
    var lis = $("ul#myList li");
    lis.css("width", parseInt(myFullWidth / lis.length, 10).toString() + "px");
});

Answer 2

您无法更改CSS文件，但您可以使用javascript更改页面上的CSS。

这是一个简单的Jquery示例，其中margin-top是li元素乘以2的数量。

HTML：

<button>Add item</button>
<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

使用Javascript：

var itemCount = $('ul').children().length;
$('button').click(function(){
    $('ul').append('<li>Item</li>');
    itemCount = itemCount = $('ul').children().length;
    $('ul').css('margin-top', itemCount * 2);
});

http://jsfiddle.net/Q36u2/

如何根据一定数量的li使用CSS calc？

2 个答案: