我正在尝试使用表格将导航栏放在一起:
- 有 n 个指向网站不同部分的链接
- 有一个“注销”链接,是一个固定大小的图标
我想做的是以下内容。整个栏的可用宽度(预先知道)减去图标所需的宽度应该在包含 n 个导航链接的单元格中平均分配(忽略内部链接的大小,这不是问题)。
目前,我正在用 PHP 执行此计算并用于实现此目的。但是,这不符合 XHTML 1.0 Strict 标准。根据 W3C 验证程序,我应该使用 CSS 来设置列的宽度。问题是:我不知道该怎么做,如果可能的话。可能这个问题暗示我不应该为此使用表格,但当时我没有其他想法。
我怎样才能以 XHTML Strict 和 CSS 兼容的方式使用表格或其他东西来达到效果?
最佳答案
首先,报废表格。您的链接不是表格数据。
基础知识
从这里开始:
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)+"%");
});
关于css - 具有不同列宽的 XHTML 严格表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1502363/