html标签

来源：互联网发布：联想笔记本安装mac os 编辑：程序博客网时间：2024/06/05 20:26
<!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>
0 0