恳请各位朋友帮我看看这个HTML里面的NAV菜单末尾空白的问题。谢谢大家!-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

2016-07-08 09:46:51 2303 1

各位朋友大家好。我向大家请教一个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输出。这个数值,都是和用屏幕像素尺子量出来的是一致的。
screenshot
screenshot

取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:53:07
    body {
        background-color: #EEEEEE;
        background-image: url("data:image/gif;base64,R0lGODlhCAAIAJEAAMzMzP///////wAAACH5BAEHAAIALAAAAAAIAAgAAAINhG4nudroGJBRsYcxKAA7");
         
        width: 700px;
            margin-left:auto;
            margin-right:auto;
    }

    也就是说直接设定了body的宽度,没有用原帖中的js去动态设定。那么这么做以后,我发现NAV菜单最后一个li后面的那个留白,在不同的浏览器中是不一样的。IE中比较窄,而FF和Chrome中比较宽。所以,如果我调整body的宽度,让他正好可以在IE中容纳整个NAV的菜单,但是又不会让人感觉下面的文字在右边对不齐的时候;同样的设置(body的宽度),在FF和Chrome里面,就会让菜单的最后一个项目跑到下一行了(因为不够宽)。有朋友建议我解决这个问题的方法可以考虑把ul的背景改成和li的背景一样。这样的话,最后多余出来的那一段留白,也就看起来和菜单按钮一样了。这样做当然也可以达到效果,但是这个并不是我的本意。所以我就想,如果是我用js来动态设定这个宽度,是不是就可以解决这个在不同浏览器中,ul宽度不同的问题了呢?于是就有了主贴中的尝试。。。。很明显,这个尝试失败了,但是我想不出来失败的原因。所以发帖子上来向大家问问。

    0 0
相关问答

1

回答

angularjs 绑定数据时 怎么转义html标签

2016-03-11 11:43:53 1980浏览量 回答数 1

0

回答

在iPhoneSDK中删除指定HTML标签

2016-03-11 17:11:10 2127浏览量 回答数 0

1

回答

关于html问题标签没闭合问题

2016-03-12 12:58:32 1596浏览量 回答数 1

2

回答

求助html标签的基础问题

2016-03-16 09:03:48 3157浏览量 回答数 2

1

回答

html中一个标签多次继承一个样式?

2016-06-03 17:45:19 1749浏览量 回答数 1

1

回答

如何防止用户评论功能中的未闭合HTML标签?

2016-06-14 17:39:36 1909浏览量 回答数 1

1

回答

html中,与<frameset>类似,可以手动拖动单元格大小的标签还有哪个?

2016-06-15 18:08:50 1767浏览量 回答数 1

1

回答

如何避免发私信时嵌入表情需要转义html标签而带来的安全问题?

2016-06-16 14:16:22 2001浏览量 回答数 1

1

回答

HTML多行同样的标签,绑定事件后获取当前的标签的值?

2016-06-22 18:44:29 2095浏览量 回答数 1

1

回答

话说用HTML标签自带的onclick之类好还是JQ的绑定事件好?

2016-07-14 14:31:05 1920浏览量 回答数 1
+关注
文章
问答
问答排行榜
最热
最新
相关电子书
更多
《零基础HTML入门教程》
立即下载
利用 Poplayer 在手淘中实现稳定业务和临时业务分离
立即下载
低代码开发师(初级)实战教程
立即下载