<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
ul, li {
margin: 0;
padding: 0;
}
.biaoti {
float: none;
width: auto;
clear: left;
border: 1px solid red;
color: red;
margin-top: 10px;
height: 40px;
}
ul {
/*margin-left: px;*/
margin-top: 0.1px;
list-style: none;
height: 100%;
}
ul li {
text-align: center;
list-style-type: none;
margin-left: -1px;
float: left;
padding-left: 0px;
border: 1px solid #0094ff;
height: 100%;
width: 16.5%;
}
#left {
border: 1px solid #0094ff;
width: 80%;
float: left;
height: 40px;
}
#right {
margin-left: 80%;
border: 1px solid #000000;
width: 20%;
height: 40px;
}
.direction {
/*width:50%;*/
border-bottom: 1px solid #ff00dc;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="height: 100%;">
<div class="biaoti">
<div id="left">
<ul>
<li ><div style="margin-top:5%">01</div></li>
<li><div style="margin-top:5%">02</div></li>
<li><div style="margin-top:5%">03</div></li>
<li><div style="margin-top:5%">04</div></li>
<li><div style="margin-top:5%">05</div></li>
<li><div style="margin-top:5%">06</div></li>
</ul>
</div>
<div id="right">
<div class="direction">
<div style="text-align: center;">up1</div>
</div>
<div class="direction">
<div style="text-align: center;">down1</div>
</div>
</div>
</div>
<div class="biaoti">
<ul>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
</ul>
</div>
</div>
</form>
</body>
</html>
原文：http://www.cnblogs.com/kexb/p/5023927.html