2

我有一个网站模板，我不知道菜单项的数量或所需的菜单项的大小。下面的 js 完全按照我想要的方式工作，但是这是我写过的最多的 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);
    }
});
4

6 回答 6

2

您可以在 CSS 中使用display: inline-block, 和text-align: justify

<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 */

演示

​</p>

于 2012-06-02T22:39:52.573 回答
1

是的，使用 JS 进行格式化也有缺点。

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

Javascript 的解释和运行因浏览器而异，从操作系统到操作系统，从操作系统/浏览器版本到版本。

CSS 渲染是原生浏览器引擎功能，其渲染优先级高于 JS。

CSS 渲染比 JS 快得多。

等等。

你现在在做什么我永远不会建议这样做。恕我直言，这是一种非常错误的方法。在这种情况下，JS 绝对被滥用。你必须使用 CSS 来完成这个任务，我建议发布一个关于如何正确使用 CSS 来完成这个任务的问题。

于 2012-06-02T22:32:53.493 回答
0

我建议在它们之间设置一个默认间距，不会将它们推出容器。使它们能够平均分配空间的额外 javascript 应该只是一种增强。

于 2012-06-02T22:34:10.177 回答
0

我认为你的问题的答案是，如果它有效，那么它有效（并将继续有效），但这并不意味着这是处理它的最佳方式。如果您*关心最好的方法，那么请研究如何主要（甚至完全）使用 CSS 来改进您的方法。如果您只是想完成工作，并且它正在发挥作用，那么您就可以开始了。

于 2012-06-02T22:35:28.367 回答
0

根据您的网站访问者，大约 3% 的访问者会在禁用 JS 的情况下访问您。并且您希望该网站为他们工作。也许不是站点中不重要的部分，但您希望关键部分正常工作。导航是网站最重要的部分之一。

确保导航在没有 JS 的情况下也能正常工作（不必像 JS 那样花哨），然后您可以使用 JS 进行一些改进。

于 2012-06-02T22:59:08.083 回答
0

您不需要 JavaScript，只要您可以依赖一种使宽度适应其内容的 CSS 算法：表格布局算法 :)

有关示例，请参见我之前的答案中的http://jsfiddle.net/r9yrM/1/ 。

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

使用 JS，您可以决定选项卡的最大数量（或最小的“合理”宽度）以及高于（低于）该数量，在父级上添加一个类，该类将触发每个选项卡呈现为float: left和block不再呈现table-cell。然后它将占据 2 行或更多行（如Firefox 上的扩展Tab Mix Plus ）

注意：table 至少有 2 种算法：with 和 without table-layout: fixed，这取决于在适应时留给浏览器的自由度。

请注意上面的 jQuery 代码：“除第一个之外的每个 li”可以表示为$('li + li')（第一个前面没有 a li）

于 2012-06-03T04:39:39.037 回答