Question

我有一个网站模板，我不知道菜单项的数量或所需菜单项的大小。下面的js完全按照我想要的方式工作，但这是我写的最多js。我不知道这个方法有什么缺点或潜在的问题因为我是初学者吗？我目前正在为每个站点手动设置填充。谢谢！

var width_of_text = 0; 
var number_of_li = 0;

// measure the width of each <li> and add it to the total with, increment li counter
$('li').each(function() {
    width_of_text += $(this).width();
    number_of_li++;
});

// calculate the space between <li>'s so the space is equal
var padding = Math.floor((900 - width_of_text)/(number_of_li - 1));

// add the padding the all but the first <li>
$('li').each(function(index) {
    if (index !== 0)
    {
        $(this).css("padding-left", padding);
    }
});

Answer 1

您可以使用display: inline-block和text-align: justify

在CSS中执行此操作

<ul>
    <li>thing</li>
    <li>thing2</li>
    <li>thing3</li>
    <li>thing4</li>
    <li class="hack"></li>
</ul>

然后：

ul { text-align: justify }
li { display: inline-block }
li.hack { width: 100% } /* force the justified text to wrap */

Demo

Answer 2

是的，使用JS进行格式化存在缺点。

强烈建议避免使用JS进行格式化和定位，尽可能使用CSS。

从浏览器到浏览器，从操作系统到操作系统，从操作系统/浏览器版本到版本，Javascript的解释和运行方式都有很大不同。

CSS渲染是一种本机浏览器引擎功能，其渲染优先级高于JS。

CSS渲染比JS快得多。

等

你现在在做什么，我绝不会建议做。恕我直言，这是一个非常错误的方法。在这种情况下，JS绝对被严格滥用。您必须使用CSS执行此任务，我建议您发布有关如何正确使用CSS执行此任务的问题。

Answer 3

我建议它们之间有一个默认的间距，不会将它们推出容器。额外的javascript使它们能够同等地使用空间应该只是一个增强功能。

Answer 4

我认为你的问题的答案是，如果它有效，那么它可以工作（并将继续工作），但这并不意味着这是处理它的最佳方式。如果您关心最佳方式，那么请研究如何使用大多数（甚至是专门）CSS来改进您的方法。如果你只是想完成工作，而且工作正常，那么你就可以去了。

Answer 5

根据您的网站访问者的不同，将有大约3％的人在JS禁用的情况下访问您。并且您希望该网站为他们工作。也许不是网站的不可靠部分，但您希望关键部分能够正常工作。导航是网站最重要的部分之一。

确保导航在没有JS的情况下工作（不必像JS一样精致）然后你可以用JS做一些改进。

Answer 6

只要您可以依赖适应其内容宽度的CSS算法，您就不需要JavaScript：表格布局算法：）

请参阅http://jsfiddle.net/r9yrM/1/中的previous answer获取示例。

不要忘记在每个“单元格”上都有最小填充，粘在边框上的文字不是很易读（而且很难看）。你也可能想要text-align: center在单元格上（最后的CSS规则）。

使用JS，您可以决定最大数量的选项卡（或最小“合理”宽度）以及上面（下方）该数字，在父级上添加一个类，该类将触发每个选项卡呈现为{{1} }和float: left而不是block了。然后它将占用2行或更多行（如Firefox上的扩展 Tab Mix Plus ）

注意：表格至少有2种算法：有和没有table-cell，具体取决于适应时留给浏览器的自由。

请注意上面的jQuery代码：“除了第一个之外的每个li”可以用table-layout: fixed表示（第一个不以$('li + li')开头）

可以依靠javascript进行菜单布局吗？

6 个答案: