<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>
<style>    
*{ margin:0; padding:0;}
.box{ width:350px; height:500px; background:#999; padding-top:60px; padding-left:60px;}
.box li{ float:left; list-style:none}
.box li a{
    border:5px solid #aaa;
    display:block; width:100px;
    height:60px; text-decoration:none;
    margin:0 0 -5px -5px;
    position:relative;
    z-index:0;
    text-align:center;
    line-height:60px;
    color:#fff;
    font-size:30px;
    }
.box li a:hover{ border:5px solid #333; z-index:1;}
</style>

<ul class="box">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
     <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li><a href="#">12</a></li>
     <li><a href="#">13</a></li>
    <li><a href="#">14</a></li>
    <li><a href="#">15</a></li>
</ul>

</body>
</html>

ul li 布局表格计算器_html

 

给心灵一个纯净空间，让思想，情感，飞扬！