可用於製作分頁標簽. 如: 方法一: display: table-cell; 方法二: 定位 示例代碼如下: ...
可用於製作分頁標簽. 如:
方法一: display: table-cell;
ul{
list-style: none;
display:table;
margin: 40px auto;
}
li{
display:table-cell;
}
方法二: 定位
div{
float: left;
position: relative;
left: 50%;
}
ul{
list-style: none;
position: relative;
left: -50%;
}
li{
width: 20px;
height: 20px;
border: 1px solid gray;
float: left;
}
示例代碼如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#container{
border:1px solid red;
}
ul{
list-style: none;
display:table;
margin: 40px auto;
}
li{
display:table-cell;
}
li a{
background-color: #ddd;
text-decoration: none;
padding:5px 8px;
}
.cl{
clear:both;
}
</style>
</head>
<body>
<div id="container">
<ul>
<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>
</ul>
<div class="cl"></div>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<div class="cl"></div>
<ul>
<li><a href="#">1</a></li>
</ul>
</div>
</body>
</html>
