<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>不管神马标签总能右侧对齐</title>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
<style type="text/css" media="screen">
* { margin: 0; padding: 0; font-size:13px; }
.clear:before, .clear:after { content:''; display:table; }
.clear:after { clear:both; }
.clear { zoom:1; }
.item_list { background: #fff; width: 300px; margin: 100px; }
.item_list a { 
    text-align:center; color: #fff; text-decoration: none; background: #369; display: block;
    float: left; padding:5px 10px; margin: 0 2px 2px 0; border: 0px solid red;
}
.item_list a:hover { background: #DD1111; }
</style>
</head>
<body>
<div class="item_list clear">
    <a href="0.html" class="on">全部</a>
    <a href="1.html">ajax</a>
    <a href="2.html">php</a>
    <a href="3.html">node.js</a>
    <a href="4.html">python</a>
    <a href="5.html">mysql</a>
    <a href="6.html">sqlite</a>
    <a href="7.html">asp</a>
    <a href="8.html">jsp</a>
    <a href="9.html">jquery</a>
    <a href="10.html">nginx</a>
    <a href="14.html">redis</a>
    <a href="15.html">HTML5</a>
    <a href="15.html">好</a>
    <a href="11.html">Action Script 3.0</a>
    <a href="12.html">JAVA</a>
    <a href="13.html">Android</a>
    <a href="16.html">C++</a>
    <a href="18.html">PhotoShop CS</a>
    <a href="18.html">Notepad++</a>
    <a href="17.html">不管神马标签</a>
    <a href="17.html">总能</a>
    <a href="17.html">让右侧</a>
    <a href="17.html">对齐哈</a>
</div>
 
<script type="text/javascript">
$(function(){
    //自动均匀布局标签
    var $target = $('.item_list');
    var $items = $('.item_list > a');
    var max_width = $target.width(); //box宽度
    var count = $items.size(); //所有单元个数统计
    var index = 0; //当前初始索引位置
    var tmp = 0;
    $items.each(function(){
        var $curr = $(this); //当前年item的DOM对象
        var outer_width = $curr.outerWidth(true); //区块宽度，含边框
        var border_width = outer_width - $curr.outerWidth(); //左右边框宽度
        tmp += outer_width; //计算每个item相加的值
        //遍历单元凑齐宽度
        if ( tmp > max_width ) {
            var $point = $curr.prev();
            var plus = max_width-(tmp-outer_width);
            avg_width($point, plus + border_width);
            tmp = outer_width;
        }
        //最后一个元素调整
        if ( $curr.is(':last-child') ) {
            var plus = max_width - tmp;
            avg_width($curr, plus + border_width);
        }
    });
 
    //均匀化各项平均宽度
    function avg_width($point, add_width) {
        //创建一个表示元素索引范围的数组
        var arr = range(index, $point.index());
        var add = Math.floor(add_width/arr.length);
        var end = add_width % arr.length;
        for ( var i in arr ) {
            var $item = $items.eq( arr[i] ); 
            $item.width($item.width()+add);
        }
        $point.width($point.width()+end);
        $point.css('margin-right', 0);
        index = $point.index()+1;
    }
 
    //生成指定范围的数组
    function range(low, high, step) {
        var matrix = [];
        var inival, endval, plus;
        var walker = step || 1;
        var chars = false;
        if (!isNaN(low) && !isNaN(high)) {
            inival = low;
            endval = high
        } else if (isNaN(low) && isNaN(high)) {
            chars = true;
            inival = low.charCodeAt(0);
            endval = high.charCodeAt(0)
        } else {
            inival = (isNaN(low) ? 0 : low);
            endval = (isNaN(high) ? 0 : high)
        }
        plus = ((inival > endval) ? false: true);
        if (plus) {
            while (inival <= endval) {
                var char_code = String.fromCharCode(inival);
                matrix.push(((chars) ? char_code : inival));
                inival += walker
            }
        } else {
            while (inival >= endval) {
                var char_code = String.fromCharCode(inival);
                matrix.push(((chars) ? char_code : inival));
                inival -= walker
            }
        }
        return matrix;
    }
});
</script>
</body>
</html>