顯示在導航媒體查詢中的水平滾動條

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;