PC 端两端对齐中间等分

来源：互联网发布：网络标准体系架构编辑：程序博客网时间：2024/05/16 12:13

<!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 type="text/css">
body{margin:0;padding:0;}
ul,li{margin:0;padding:0;list-style:none;}
.tab{
width:500px;
margin:0 auto;
height:300px;
border:1px solid #000;
}
ul{
width:100%;
text-align:justify; /*两端对齐*/
text-align-last:justify; /*两端对齐*/
}
ul:after{ /*兼容chrome firefox*/
width:100%;
content:'';
display:inline-block;
font-size:0;
}
a{
width:100px;
display:inline-block;
height:40px;
line-height:40px;
background:#CCC;
*display: inline; /*display:inline-block;兼容ie6和ie7*/
*zoom: 1;
}
</style>
</head>

<body>
<div class="tab">
<ul>

<a>测试1</a>
<a>测试2</a>
<a>测试3</a>
<a>测试4</a>
</ul>
</div>
</body>
</html>
经过测试<li>标签IE6不支持 a标签所有浏览器都支持

0 0

PC 端两端对齐 中间等分

PC 端两端对齐中间等分