We would like to know how to create non-standard li layout as table.
revised from http://fiddle.jshell.net/achudars/ufMEa
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
ul {<!--from w ww . ja va 2s . c o m-->
width: 220px;
height: 220px;
}
li {
float: left;
margin: 2px;
list-style-type: none;
border: 1px solid #222;
display: inline-block;
}
#AA {
width: 40px;
height: 80px;
}
#BB {
width: 40px;
height: 40px;
}
#CC {
width: 40px;
height: 40px;
}
#DD {
width: 40px;
height: 80px;
}
#EE {
width: 40px;
height: 40px;
}
#FF {
margin-top: -38px;
margin-left: 2px;
width: 86px;
height: 80px;
}
#GG {
width: 40px;
height: 40px;
}
#HH {
width: 40px;
height: 40px;
}
#II {
width: 40px;
height: 40px;
}
#JJ {
width: 40px;
height: 40px;
}
#KK {
width: 40px;
height: 40px;
}
li:hover {
background: #EEE;
}
</style>
</head>
<body>
<ul>
<li id="AA"></li>
<li id="BB"></li>
<li id="CC"></li>
<li id="DD"></li>
<li id="EE"></li>
<li id="FF"></li>
<li id="GG"></li>
<li id="HH"></li>
<li id="II"></li>
<li id="JJ"></li>
<li id="KK"></li>
</ul>
</body>
</html>
The code above is rendered as follows: