Question

我很累，并没有找到任何解决方法如何摆脱这个问题。首先查看此处的屏幕截图

http://i.gyazo.com/6a37d495512524e476987083a1eca9d4.png

现在这里是代码

<nav class="main-nav">
                    <ul>
                        <li><a href="#" class="active">Home</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Our Work</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>

@media only screen and (min-width:240px) and (max-width:767px){
    .main-header .logo{
        float: none;
        display: block;
        margin: auto;
        width: 40%;
    }

    .main-header .main-nav {
        width: 100%;
        float: none;
        display: block;
        padding-top: 10px;
    }

    .main-header .main-nav ul{
        float: right;
        margin: 0;
        padding: 0;
        text-align: center;
        margin: auto;
        width: 100%;
    }

    .main-nav ul li{
        float: none;
        display: block;
        margin: 0;
    }

    .main-nav ul li a{
        display: block;
        padding: 10px 20px;
        border-bottom: 1px dashed #cccccc;
    }

    .main-nav li:last-child a{
        border:0;
    }

    .main-nav ul li a:hover, .main-nav ul li a.active{
        border:0;
        background: #e7e5e2;
        padding: 10px 20px;

}
}

这是我第一次遇到这样的问题。请帮忙。

Answer 1

通常情况下，您可以检查哪个元素导致右侧溢出并进行调整。但是从您提供的代码中，很难准确地再现我们在屏幕截图中看到的内容。当您不需要滚动条时（所以当右侧没有实际内容时）您可以通过将此CSS添加到导致滚动条的元素来隐藏滚动条：overflow-x: hidden;

水平滚动条显示在导航媒体查询中

1 个答案: