<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>两边固定中间元素平分</title>
<script src="js/jquery-1.12.1.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
ul{width: 460px;margin:0 auto;border: 1px solid red;height: 110px;position: relative;top: -10px;}
li{width: 98px;margin: 10px;border: 1px solid black;float: left;}
ul li:nth-child(4n-3){margin-left: 0;} // n指的是第几排
ul li:nth-child(4n){margin-right: 0;}
ul li:nth-last-child(2){margin-bottom: 0;}
</style>
</head>
<body>
</body>
<script type="text/javascript">
$(function(){
for (var i = 0; i < 10; i++) {
var liObj = '<li></li>';
$('ul').append(liObj);
}
})
</script>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>两边固定中间元素平分</title>
<script src="js/jquery-1.12.1.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
ul{width: 460px;margin:0 auto;border: 1px solid red;height: 110px;position: relative;top: -10px;}
li{width: 98px;margin: 10px;border: 1px solid black;float: left;}
ul li:nth-child(4n-3){margin-left: 0;} // n指的是第几排
ul li:nth-child(4n){margin-right: 0;}
ul li:nth-last-child(2){margin-bottom: 0;}
</style>
</head>
<body>
<ul>
</ul></body>
<script type="text/javascript">
$(function(){
for (var i = 0; i < 10; i++) {
var liObj = '<li></li>';
$('ul').append(liObj);
}
})
</script>
</html>