jquery - 导航列表项自动大小

标签 jquery html css

我在这里的一些成员的帮助下(感谢)编写了这个脚本,它获取导航的宽度及其所有列表项子项,计算出有多少空间可用并将其设置为填充列表项中的每个 anchor 。它有效,但我每次填充大约 2 个像素,并且不确定我哪里出错了。有人有任何线索吗?

$(document).ready(function () {

    var numb = $("nav ul").children().length,
        nav = $('nav').outerWidth(),
        width = 0;

    $('nav ul li').each(function () {
        width += $(this).outerWidth();
    });

    var padding = ((nav - width) / numb) / 2;

    $('nav ul li a').css({
        'padding-right': padding,
        'padding-left': padding,
    });
});

这是问题 http://jsfiddle.net/axXR4/ 的工作/非工作 js fiddle

谢谢!

最佳答案

需要进行两项更改。

首先,从您的填充值中删除小数点:

var padding = Math.floor(((nav - width) / numb) / 2);

并从您的 ul 中删除填充:

nav ul {
    list-style:none;
    padding:0;
}

http://jsfiddle.net/axXR4/5/

关于jquery - 导航列表项自动大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16986068/

相关文章:

javascript - 无法从动态数据对象设置裁剪器数据

jquery - 在弹出窗口中选择框在 Internet Explorer 中不起作用

javascript - 从ajax接收多个变量并使用php将其写入文本文件

javascript - 选择框选项不显示选定

html - doctype html 破坏布局

html - 使 div 无响应但不影响 foundation zurb 中的父 div

javascript - 检查 Javascript 中的正整数 : performance and security

javascript - 如何让基本的 jQuery 选项卡在 .Net 模式弹出窗口中工作?

html - Bootstrap Nav pills 使用 flexbox justify-content :space-between property 无法按预期工作

html - inline-block 在 Chrome 中与容器的边框重叠