众所周知,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下看看。
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