Question

我正在创建一个导航菜单，其中每个菜单项的宽度必须相等，总宽度为970px。物品数量将是动态的（有时为6,7或5）。我遇到的主要问题是我目前的做法：

$(document).ready(function () {
    // Navigation Tab Width Calculation
    var nCnt = $("#nav > li").length;
    var navConstraint = 970 - (nCnt - 1);
    var nWidth = navConstraint / nCnt;

    //// Sets Distributed Width of items
    $("#nav > li > a").css({ "width": nWidth + "px" });

    //// Sets Width of ul in submenus
    $("#nav ul").css({ "width": nWidth + "px" });

    //// Sets Width of li in submenus
    $("#nav ul li").css({ "width": nWidth + "px" });

    //// Sets Width of a tags in submenus width an adjustment for padding
    $("#nav ul li a").css({ "width": nWidth - 10 + "px" });

    /// Width Fixes for first and last nav elements
    $("#nav > li:first").css({ "margin-left": "0px" });

    //// Fixes the last item to fit the stock image width, by browser if necessary
    var lastOffset = 1;

    $("#nav > li a:last").width(nWidth - lastOffset);

    //// Adds Vertical Centering for Menu Items
    $("#nav").children("li").each(function () {
            var nh = ($(this).find("a").find(".navText").height());

            if (nh < 20) {
                    $(this).find(".navTextPadder").height(11);
            }
            else {
                    $(this).find(".navTextPadder").height(7);
            }

    });

我遇到的问题是IE浏览器也不处理宽度，不确定它们是否不能处理十进制宽度但是它比FF更短，这非常精确。有更好的方法吗？

Answer 1

使用Math.floor或其他内容来整理数字。

另一种方法是使用一个好的旧表：

<table width="100%">
  <tr>
    <td>content</td>
    <td>content</td>
    <td>content</td>
  </tr>
</table>

生成动态和浏览器兼容的等宽菜单项

1 个答案: