Li的横向排列自适应宽度问题

发布时间:2007年02月12日      浏览次数:1351 次
众所周知,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):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"
/><title>Normal</title><style type="text/css"><!--
*{ margin:0px; padding:0px;}#d
{ display:table; margin:0
auto; background:#0cf; padding:10px; width:80%; border:
1px solid #f00;}#d ul{ display:table-row-group;}#d li
{ display:table-cell; list-style:none; border:1px solid
#333; background:red; text-align:center;}--
></style></head><body><div id="d">
<ul> <li>aaa</li>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li> <li>aaa</li>
</ul></div></body></html>
IE不支持该效果,FF和OPERA下看看。
文章来源:http://www.divcss.org/Article/cg/200610/35019.html
免责声明:本站相关技术文章信息部分来自网络,目的主要是传播更多信息,如果您认为本站的某些信息侵犯了您的版权,请与我们联系,我们会即时妥善的处理,谢谢合作!