实现了菜单条小屏幕左右滑动后，菜单背景颜色不能填满，如何解决这问题

Question

实现了菜单条小屏幕左右滑动后，菜单背景颜色不能填满，如何解决这问题

发布于
2017-11-02

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Modernizr -->
    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    <!-- Respond.js for IE 8 or less only -->
    <!--[if (lt IE 9) & (!IEMobile)]>
            <script src="js/vendor/respond.min.js"></script>
        <![endif]-->
    <style>
        #sorts-container {
            background-color: #fff;
            border-bottom: 1px solid #d0d0d0;
            box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.2);
            white-space: nowrap;
        }
        
        .nav li:hover>ul {
            display: block;
        }
        
        #sorts>ul>li>a:hover,
        #sorts>ul>li>a:focus {
            background-color: #f4f4f4;
            color: #7c7c7c;
        }
        
        .center3 {
            width: auto;
            text-align: center;
            margin: 0 auto;
            float: none;
            clear: none;
        }
        
        .ul-wapper-2>.nav-tabs {
            padding-left: 10px;
            padding-right: 10px;
            padding-bottom: 10px;
            white-space: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            padding-bottom: 5px;
            margin-bottom: -5px;
            -ms-overflow-style: none;
            overflow: -moz-scrollbars-none;
        }
        
        .ul-wapper-2>.nav-tabs>li {
            list-style: none;
            display: inline-block;
            float: none;
            margin-bottom: -20px;
        }
        
        .ul-wapper-2>.nav-tabs>li>a {
            font-size: 20px;
            color: #7c7c7c;
            line-height: 48px
        }
        
        .ul-wapper-2>.nav-tabs>li>a:hover {
            border-color: transparent;
            background-color: transparent;
            color: #7c7c7c;
        }
        
        .ul-wapper-2>.nav-tabs>li.active>a {
            background-color: #DDD;
            border: 0;
        }
        
        .ul-wapper-2>.nav-tabs::-webkit-scrollbar {
            width: 0px
        }
        
        .navbar>.ul-wapper-2>.nav-tabs>li>a:hover,
        .navbar>.ul-wapper-2>.nav-tabs>li>a:focus {
            color: #ddd;
        }
        
        .ul-wapper-2>.nav-tabs>li>a:hover,
        .ul-wapper-2>.nav-tabs>li>a:focus {
            color: #f2f2f2;
        }
        
        .ul-wapper-2>.nav-tabs>li>a:active {
            color: #eee;
        }
        
        .gyk {
            height: 60px;
            width: auto;
        }
        
        #products>.container>.tab-content {
            padding: 20px 0;
        }
        
        .nav-tabs {
            border-bottom: 0px solid #ddd;
        }
        
        .nav-tabs>li>a {
            position: relative;
            display: block;
            padding: 5px 10px;
        }
        
        .nav-tabs>li>a {
            margin-right: 2px;
            line-height: 1.42857143;
            border: 1px solid transparent;
            border-radius: 2px 2px 0 0;
        }
        
        @media (max-width: 339px) {
            .gyk {
                height: 50px;
                width: 260px;
            }
        }
        
        @media (min-width: 340px) and (max-width: 449px) {
            .gyk {
                height: 50px;
                width: 320px;
            }
        }
        
        @media (min-width: 550px) and (max-width: 767px) {
            .gyk {
                height: 60px;
                width: 600px;
            }
        }
        
        @media (min-width: 768px) and (max-width: 1023px) {
            .gyk {
                height: 60px;
                width: 800px;
            }
        }
        
        @media (min-width: 1024px) and (max-width: 1200px) {
            .gyk {
                height: 60px;
                width: 1000px;
            }
        }

    </style>
</head>

<body>

    <br>
    <br>
    <br>
    <br>
    <br>
    <section id="impact">
        <div class="sticky">
            <div id="sorts-container" class="nav-gd" style="position: fixed; top:105px;  z-index: 9999;">
                <div id="sorts" class="ul-wapper-2 gyk" style="">
                    <ul class="nav center3 nav-tabs">
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                        <li><a href="#home">Dropdown</a></li>
                    </ul>
                </div>
            </div>
        </div>




    </section>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>





    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')

    </script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    <script>
        var _gaq = [
            ['_setAccount', 'UA-XXXXX-X'],
            ['_trackPageview']
        ];
        (function(d, t) {
            var g = d.createElement(t),
                s = d.getElementsByTagName(t)[0];
            g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g, s)
        }(document, 'script'));

    </script>
</body>

</html>

如下两图

图片描述

css

html5 javascript

阅读 2.8k

1 个回答

ChenJing

✓ 已被采纳

找到css的这个类，把margin-bottom去掉就可以了

.ul-wapper-2>.nav-tabs>li {
    list-style: none;
    display: inline-block;
    float: none;
    margin-bottom: -20px; /* 把这个去掉 */
}

图片描述

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

实现了菜单条小屏幕左右滑动后，菜单背景颜色不能填满，如何解决这问题

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现一个深拷贝函数？

快开发完的Vue3项目要做SEO该如何处理？

怎么获取动态弹出对话框的模拟单击？