恳请各位朋友帮我看看这个HTML里面的NAV菜单末尾空白的问题。谢谢大家！

各位朋友大家好。我向大家请教一个HTML里面NAV菜单右端多余的空白空间的问题。请大家多多指教。

先上代码。我的HTML代码是这么写的：

<nav>
                <ul id="tabs">
                    <li>
                        <a id="tab1" class="current" href="#" tabindex="1">HOMEPAGE</a>
                    </li>
                    <li>
                        <a id="tab2" href="#" tabindex="2">SERVICES</a>
                    </li>
                    <li>
                        <a id="tab3" href="#" tabindex="3">PROJECTS</a>
                    </li>
                    <li>
                        <a id="tab4" href="#" tabindex="4">PRODUCTS</a>
                    </li>
                    <li>
                        <a id="tab5" href="#" tabindex="5">CONTACTS</a>
                    </li>
                </ul>
            </nav>

相关的CSS代码是这样的：

/* http://www.red-team-design.com/google-play-minimal-tabs-with-css3-jquery */
 
#tabs {
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
     
    border-style:solid;
    border-width:1px;
    border-color:red;   
}
 
#tabs li {
    float: left;
    /*margin: 0 -15px 0 0;*/   
}
 
#tabs a {
    font-family: 'Port Lligat Sans', sans-serif;
    font-weight: bold;
    float: left;
    position: relative;
    padding: 0 30px;
    height: 0;
    line-height: 30px;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    border-bottom: 30px solid #3D3D3D;
    border-bottom-color: #777;
    opacity: .3;
    filter: alpha(opacity=30);  
}
 
#tabs a:hover, #tabs a:focus {
    border-bottom-color: #2ac7e1;
    opacity: 1;
    filter: alpha(opacity=100);
}
 
#tabs a:focus {
    outline: 0;
}
 
#tabs .current {
    z-index: 3;
    border-bottom-color: #3d3d3d;
    opacity: 1;
    filter: alpha(opacity=100);
}

我为了下面的内容和NAV菜单两边对齐，用了一段javascript代码去设置body的宽度，代码是这样的：

<script>
            function updatePageW() {
                 
                var wNav = 0;
                $('#tabs li').each(function () {
                    var wLi = $(this).outerWidth(true);
                    console.log('wLi = ' + wLi);
                    wNav += wLi;
                });             
                console.log('wNav = ' + wNav);
                 
                $('body').width(wNav + 1);
            }  
                     
            $(document).ready(function () {
                updatePageW();
            });
        </script>

我的这个网页，在IE9里面看起来是一切正常的。截图如下。请注意截图中的Log输出。这个数值，都是和用屏幕像素尺子量出来的是一致的。