Question

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

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

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

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

如何以XHTML Strict和CSS兼容的方式使用表格或其他方式实现效果？

Answer 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)+"%");
});

Answer 2

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

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

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

具有不同列宽的XHTML严格表

2 个答案:

基本

CSS

HTML

等宽

CSS

的jQuery