而且我的设置颜色宽高的选项要怎么布局整齐呢？
<!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=utf-8" />
<title>无标题文档</title>
<style>
body,ul{ margin:0px; padding:0px;}
li{ list-style:none;}
h2{ color:red; float:left;}
#btn{ height:40px; color:#F00; float:left; margin-top:10px;}
#box{ width:100px; height:100px; border:2px solid #000; clear:left;}
body, html {
height: 100%;
}
.floats {
background: #000 none repeat scroll 0 0;
height: 100%;
left: 0;
opacity: 0.5;
position: absolute;
top: 0;
width: 100%;
}
.alter {
background: #fff none repeat scroll 0 0;
border: 2px solid red;
height: 200px;
left: 50%;
margin-left: -202px;
margin-top: -102px;
position: absolute;
top: 50%;
width: 400px;
}
li{ float:left; margin:5px ;}
</style>
</head>
<body>
<h2>请为下面的DIV设置样式：</h2>
<input type="button" id="btn" value="点击设置" />
<div id="box"></div>
<div id="boss" style="display:none">
<div class="floats"></div>
<div class="alter">
<ul id="choose1">
<li>请选择背景色：</li>
<li><input type="button" value="红" /></li>
<li><input type="button" value="黄" /></li>
<li><input type="button" value="蓝" /></li>
</ul>
<ul id="choose2">
<li>请选择宽(px)：</li>
<li><input type="button" value="200" /></li>
<li><input type="button" value="300" /></li>
<li><input type="button" value="400" /></li>
</ul><ul id="choose1">
<li>请选择高(px)：</li>
<li><input type="button" value="200" /></li>
<li><input type="button" value="300" /></li>
<li><input type="button" value="400" /></li>
</ul>
</div>
</div>
<script>
document.getElementById('btn').onclick=function(){
document.getElementById('boss').style.display = block;};
</script>
</body>
</html>
陈默有言
图像789