专注于互联网--专注于架构

 最新标签
网站地图
文章索引
Rss订阅

首页 »Html教程 » div自适应宽度:菜单运用li标签 横向排列自适应宽度 »正文

div自适应宽度:菜单运用li标签 横向排列自适应宽度

来源: 发布时间:星期五, 2008年9月26日 浏览:165次 评论:0
　　FF和OPERA即其它遵循CSS2标准的浏览器由于版本的不断改进，早就支持:
　　display:table
　　dispaly:table-cell
　　dispaly:table-row
　　dispaly:table-row-group
　　dispaly:table-column
　　dispaly:table-column-group　等属性。
　　(至少是FF1.0,OPERA7就能支持了，之前的就不太清楚了)那还犹豫什么?开始动手吧(为了演示加了一些padding和border):

IE不支持该效果，FF和OPERA下看看。

\"div Example Source Code [www.52css.com]
<!DOCTYPEhtmlPUBLIC\"-//W3C//DTDXHTML1.0Transitional//EN\"\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd\"><htmlxmlns=\"http://www.w3.org/1999/xhtml\"><head><metahttp-equiv=\"Content-Type\"content=\"text/html;charset=gb2312\"
/><title>52css.com-Normal</title><styletype=\"text/css\"><!--
*{margin:0px;padding:0px;}#d
{display:table;margin:0
auto;background:#0cf;padding:10px;width:80%;border:
1pxsolid#f00;}#dul{display:table-row-group;}#dli
{display:table-cell;list-style:none;border:1pxsolid
#333;background:red;text-align:center;}--
></style></head><body><divid=\"d\">
<ul><li>aaa</li>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li><li>aaa</li>
</ul></div></body></html>

上面的示例分别定义：

\"div Example Source Code [www.52css.com]
#d{
display:table;
}
#dul{
display:table-row-group;
}
#dli{
display:table-cell;
}

那么它们在CSS2的样式里表现就分别相当于表格的<tabel>、<tr>、<td>标签，这样上面第一个示例里的5个<li>就自然的被均分横向排列在#b和#bul里，一切都很正常，表格都是这么解释的。然而，细心的朋友又会想到另一个问题，当#d的宽度不能被所包含的#dli的节点数整除，#dli的宽度又是如何均分#d的宽度呢？它在浏览器下宽度尺寸又是如何表现的呢？为了说明问题，重新定义一个不被#dli的节点数整除的#d的宽度，这里任意给个799px，在FF/opera下测试看看：

这个在IE下就不用测试了，我也没加非IE的判定。

\"div Example Source Code [www.52css.com]
<!DOCTYPEhtmlPUBLIC\"-//W3C//DTDXHTML1.0Transitional//EN\"\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd\"><htmlxmlns=\"http://www.w3.org/1999/xhtml\"><head><metahttp-equiv=\"Content-Type\"content=\"text/html;charset=gb2312\"
/><title>52css.com-Normal</title><styletype=\"text/css\"><!--
*{margin:0px;padding:0px;}#d
{display:table;margin:0
auto;background:#0cf;padding:10px;width:799px;borde
r:1pxsolid#f00;}#dul{display:table-row-group;}#dli
{display:table-cell;list-style:none;border:1pxsolid
#333;background:red;text-align:center;}--
></style></head><body><divid=\"d\">
<ul><li>aaa</li>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li><li>aaa</li>
</ul></div><scripttype=\"text/javascript\">var
d=document.getElementById(\"d\");varc=d.getElementsByTagName(\"li\");var
l=c.length;for(vari=0;i<l;i++)alert(c[i].offsetWidth)
标签：css自适应宽度 自适应宽度 iframe自适应宽度 div自适应宽度

相关文章

读者评论

  • 共0条 分0页

发表评论

  • 昵称：
  • 内容：

热门标签

精华推荐

Dig排行

阅读排行

评论排行