Css 具有可变列宽的XHTML严格表

我正在尝试使用一个表来组合导航栏：

• 有n个链接指向网站的不同部分
• 有一个“注销”链接，它是一个固定大小的图标

我想做的是以下几点。整个栏的可用宽度（事先已知）减去所需的图标宽度后，应在包含n个导航链接的单元格中平均分配（忽略内部链接的大小，这不是问题）

目前，我正在用PHP执行这个计算，并使用它来实现这一点。但是，这不符合XHTML1.0的严格标准。根据W3C验证程序，我应该使用CSS设置列的宽度。问题是：我不知道怎么做，如果可能的话。也许这个问题暗示了我不应该使用表来解决这个问题，但我当时没有其他想法

---

如何使用表或其他东西，以严格的XHTML和符合CSS的方式实现这种效果

最简单的方法是将链接放入小盒子中（大小相同）。由于CSS无法进行计算，因此您仍然必须设置框的宽度，但通过使用CSS，您可以只进行一次。对框使用

DIV

。框的类必须为

display:inline使它们的行为类似于文本中的单词（浏览器会将它们放在一行中，彼此相邻）

之后，您只需在PHP中计算每个框的宽度，并在HTML页面标题中的一小段内联CSS中发送该宽度。这样，所有框都将具有相同的宽度，并且它们将位于同一行中

例如，如何使用CSS创建导航栏，请查看您刚才阅读的页面的源代码。
最简单的方法是将链接放入小框中（大小相同）。由于CSS无法进行计算，因此您仍然必须设置框的宽度，但通过使用CSS，您可以只进行一次。对框使用
DIV
。框的类必须为
display:inline使它们的行为类似于文本中的单词（浏览器会将它们放在一行中，彼此相邻）

之后，您只需在PHP中计算每个框的宽度，并在HTML页面标题中的一小段内联CSS中发送该宽度。这样，所有框都将具有相同的宽度，并且它们将位于同一行中

例如，如何使用CSS创建导航栏，请查看您刚才阅读的页面的源代码。
首先，删除表格。您的链接不是表格数据

基础
从以下几点开始：

CSS
HTML
jQuery
或者，您可以直接使用jQuery或PHP修改宽度。由你决定。无论哪种方式，都应该使用百分比

$(function()
{
    var n = $("ul.navbar").children().length-1;
    //Get the number of links: -1 because of logout
    $("ul.navbar").width((100/n)+"%");
});

首先，把桌子扔掉。您的链接不是表格数据

基础
从以下几点开始：

CSS
HTML
jQuery
或者，您可以直接使用jQuery或PHP修改宽度。由你决定。无论哪种方式，都应该使用百分比

$(function()
{
    var n = $("ul.navbar").children().length-1;
    //Get the number of links: -1 because of logout
    $("ul.navbar").width((100/n)+"%");
});

谢谢你的建议。可能，项目应该是
。
或。。。同意您的观点，导航栏不是表格数据。列表结构不是为每个项目提供单独的行吗？我试图使所有内容都在同一行。我已重置了
li
标记的CSS，以便它们
显示：block
（如divs）和
float:left
。它们应该堆叠在一起。我使用
ul/li
标记的唯一原因是它们在语义上更加正确
div
标签也可以。谢谢你的建议。可能，项目应该是
。
或。。。同意您的观点，导航栏不是表格数据。列表结构不是为每个项目提供单独的行吗？我试图使所有内容都在同一行。我已重置了
li
标记的CSS，以便它们
显示：block
（如divs）和
float:left
。它们应该堆叠在一起。我使用
ul/li
标记的唯一原因是它们在语义上更加正确
div
标签也可以。看起来很优雅。除了去掉表之外，这可以归结为我心目中的“PHP生成的CSS”。“display:inline”允许我抛弃更多的“假表”。谢谢。如果使用
display:inline
，元素之间的空格（“”而不是间隙）将出现问题。我的解决方案避免了这个潜在问题。谢谢，我一定会注意的！看起来很优雅。除了去掉表之外，这可以归结为我心目中的“PHP生成的CSS”。“display:inline”允许我抛弃更多的“假表”。谢谢。如果使用
display:inline
，元素之间的空格（“”而不是间隙）将出现问题。我的解决方案避免了这个潜在问题。谢谢，我一定会注意的！
ul.navbar.links1 li
{
    width:100%;
}

ul.navbar.links2 li
{
    width:50%;
}

ul.navbar.links3 li
{
    width:33%;
}

ul.navbar.links4 li
{
    width:25%;
}

ul.navbar.links5 li
{
    width:20%;
}

$(function()
{
    var n = $("ul.navbar").children().length-1;
    //Get the number of links: -1 because of logout
    $("ul.navbar").addClass("links"+n);
});

$(function()
{
    var n = $("ul.navbar").children().length-1;
    //Get the number of links: -1 because of logout
    $("ul.navbar").width((100/n)+"%");
});