具有不同列宽的 XHTML 严格表

Posted 2023-03-15

【中文标题】具有不同列宽的 XHTML 严格表

【英文标题】：XHTML Strict Table with Varying Column Width

【发布时间】：2010-12-02 21:47:39

【问题描述】：

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

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

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

目前，我正在 php 中执行此计算并用于实现此目的。但是，这不符合 Xhtml 1.0 Strict 标准。根据 W3C 验证器，我应该使用 CSS 来设置列的宽度。问题是：我不知道该怎么做，如果有可能的话。可能这个问题暗示我不应该为此使用表格，但我当时没有其他想法。

如何以符合 XHTML Strict 和 CSS 的方式使用表格或其他东西来实现效果？

【参考方案1】：

首先，报废桌子。您的链接不是表格数据。

基础知识

从这个开始：

CSS

ul.navbar

    padding-right: 25px;
    list-style:none;

ul.navbar li

    margin: 0px;
    padding: 0px;
    border: 0px;
    display: block;
    float: left;


ul.navbar li.icon

    margin-right: -25px;
    width: 25px;
    float:right

HTML

<ul class="navbar">
    <li>Home</li>
    <li>FAQ</li>
    <li>Contact</li>

    <li class="icon"></li>
</ul>

等宽

图标li 应该紧贴右边缘。现在，有几种方法可以实现等间距。一种方法是拥有这些类，并使用 php 或 jquery 将它们应用于ul：

CSS

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%;

jQuery

$(function()

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

或者，您可以直接使用 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，以便它们 display:block（如 div）和 float:left。它们应该堆叠在一起。我使用ul/li 标签的唯一原因是它们在语义上更正确。 div 标签也可以。

【参考方案2】：

最简单的方法是将链接放入小盒子（大小相同）。由于 CSS 无法进行计算，您仍然必须设置框的宽度，但使用 CSS，您可以这样做一次。将DIV 用于这些框。框的类必须为 display: inline;，因此它们的行为类似于文本中的单词（浏览器会将它们彼此相邻放置在一行上）。

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

关于如何使用 CSS 创建导航栏的示例，请查看您刚才正在阅读的页面的源代码。

【讨论】：

看起来很优雅。除了摆脱表格之外，这归结为我想到的“PHP 生成的 CSS”。 “显示：内联”让我可以抛弃更多的“假表”。谢谢。

display: inline 的元素之间会出现空格问题（" " 不是间隙）。我的解决方案避免了这个潜在的问题。

谢谢，我一定会注意的！