Li的横向排列自适应宽度问题
众所周知，FF和OPERA即其它遵循CSS2标准的浏览器由于版本的不断改进，早就支持: display:table dispaly:table-cell dispaly:table-row dispaly:table-row- group dispaly:table-column dispaly:table-column-group 等属性。
众所周知，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):
function Preview(obj)
{
var TestWin=open('');
TestWin.document.write(obj.value);
}
function copyCode(obj) {
var rng = document.body.createTextRange();
rng.moveToElementText(obj);
rng.scrollIntoView();
rng.select();
rng.execCommand("Copy");
rng.collapse(false);
}
function saveCode(obj) {
var winname = window.open('', '_blank', 'top=10000');
winname.document.open('text/html', 'replace');
winname.document.writeln(obj.value);
winname.document.execCommand('saveas','','homepage.yesky.com.htm');
winname.close();
}
function addBookmark(title,url) {
if (window.sidebar) {
window.sidebar.addPanel(title, url,"");
} else if( document.all ) {
window.external.AddFavorite(url,title);
} else if( window.opera && window.print ) {
return true;
}
}
<!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
第 1 2 3 4 5 6 页
display:table
dispaly:table-cell
dispaly:table-row
dispaly:table-row- group
dispaly:table-column
dispaly:table-column-group
等属性。
(至少是 FF1.0,OPERA7就能支持了，之前的就不太清楚了)那还犹豫什么?开始动手吧(为了演示加了一些 padding和border):
function Preview(obj)
{
var TestWin=open('');
TestWin.document.write(obj.value);
}
function copyCode(obj) {
var rng = document.body.createTextRange();
rng.moveToElementText(obj);
rng.scrollIntoView();
rng.select();
rng.execCommand("Copy");
rng.collapse(false);
}
function saveCode(obj) {
var winname = window.open('', '_blank', 'top=10000');
winname.document.open('text/html', 'replace');
winname.document.writeln(obj.value);
winname.document.execCommand('saveas','','homepage.yesky.com.htm');
winname.close();
}
function addBookmark(title,url) {
if (window.sidebar) {
window.sidebar.addPanel(title, url,"");
} else if( document.all ) {
window.external.AddFavorite(url,title);
} else if( window.opera && window.print ) {
return true;
}
}
<!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
第 1 2 3 4 5 6 页
精彩图集
精彩文章