自适应宽度的标签导航

 

 <style type="text/css">        BODY        {            font-family: "宋体";        }         #tags        {            padding-right: 0px;            padding-left: 0px;            padding-bottom: 0px;            margin: 0px 0px 0px 10px;            width: 400px;            padding-top: 0px;            height: 23px;        }        #tags LI        {            background: url(../../images/tagleft.gif) no-repeat left bottom;            float: left;            margin-right: 1px;            list-style-type: none;            height: 23px;        }        #tags LI A        {            padding-right: 10px;            padding-left: 10px;            background: url(../../images/tagright.gif) no-repeat right bottom;            float: left;            padding-bottom: 0px;            color: #999;            line-height: 23px;            padding-top: 0px;            height: 23px;            text-decoration: none;        }        #tags LI.emptyTag        {            background: none transparent scroll repeat 0% 0%;            width: 4px;        }        #tags LI.selectTag        {            background-position: left top;            margin-bottom: -2px;            position: relative;            height: 25px;        }        #tags LI.selectTag A        {            background-position: right top;            color: #000;            line-height: 25px;            height: 25px;        }    </style>

    <script language="javascript">         function selectTag(selfObj) {            // 操作标签            var tag = document.getElementById("tags").getElementsByTagName("li");            var taglength = tag.length;            for (i = 0; i < taglength; i++) {                tag[i].className = "";            }            selfObj.parentNode.className = "selectTag";        }    </script>

 <div id="linkinfos" style="width: 100%; font-size: 10pt; font-weight: bold;" align="left">        <ul id="tags">            <li class="selectTag"><a onclick="selectTag(this)" href="CaseMeg.aspx" target="maincenter">                案件消息</a> </li>            <li><a onclick="selectTag(this)" href="ReceiveMeg.aspx" target="maincenter">我的消息</a>            </li>            <li><a onclick="selectTag(this)" href="SentMeg.aspx" target="maincenter">已发送</a>            </li>            <li><a onclick="selectTag(this)" href="SendMeg.aspx" target="maincenter">发送消息</a>            </li>        </ul>     </div>

source : http://www.lanrentuku.com/js/biaoqian-514.html