如何防止引導和列表中的水平滾動？

我有一個負責任的UL列表，許多李的ImageItem和跨度都在此UL認證。上最大尺寸3項顯示一行，當我調整（小）我的瀏覽器，2所顯示，它工作正常。但在我的瀏覽器的尺寸最小水平滾動顯示:(1項顯示，但滾動出現，我怎麼能防止水平滾動？這是我的CSS：如何防止引導和列表中的水平滾動？

.myUl { 
    font-size:large !important; 
    color:#373636 !important; 
    text-align:center !important; 
} 
.myUl li { 
    width:350px !important; 
} 
.myUl li:hover { 
    background:rgba(0, 0, 0, 0.2) !important; 
} 
.myUl li img { 
    height:170px !important; 
    width:100px !important; 
} 
.myUl li span { 
    float:right !important; 
    width:170px; 
    padding-right:8px !important; 
    padding-top:10px !important; 
    text-align:right !important; 
    vertical-align:middle !important; 
    line-height: 1.5em !important; 
} 
ul.img-list { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 
ul.img-list li { 
    display: inline-block; 
    height: 180px; 
    margin: 0 1em 1em 0; 
    position: relative; 
    width: 150px; 
} 
ul.img-list li:hover span.text-content { 
    opacity: 1; 
}

這是我Index.cshtml

<div> 
    <ul class="img-list myUl"> 
     <li> 
      <span> 
       some text here 
      </span> 
      <span style="float: left !important; padding-top: 3px !important;"> 
       <a> 
        <img class="img-responsive img-circle img-thumbnail" src="~/Images/MenuImages/z.jpg" /> 
       </a> 
      </span> 
     </li> 
     <li> 
      ......... 
     </li> 
    </ul>

我的頁面的圖像

來源

2015-11-23 shima amini

其中E lement是否導致滾動？檢查元素，讓我知道:) – Jay

可以請你分享任何的jsfiddle或工作演示，我們可以在現場看到問題？將help..thanx –

真的，我不知道哪個元素導致此，我改變了每一件事情，但仍出現滾動感謝 –

爲了防止水平滾動條只需在CSS中添加到您的身體標記像這樣：

body { 
    overflow-x: hidden; 
}

希望這有助於

來源

2015-11-23 06:23:05 RyanM

WOW，它的工作原理，非常感謝:) –

沒有問題，很高興我能幫助@shimaamini – RyanM

我覺得你下面的代碼會導致水平滾動，

.myUl li { 
width:350px !important; 
}

當瀏覽器尺寸低於350像素瀏覽器會顯示一個水平滾動條如果妳需要克服這個問題，你需要爲此編寫媒體查詢，如下所示：

@media only screen and (max-width: 360px) { 

    .myUl li { 
    width:100% !important; 
    } 

}

來源

2015-11-23 06:15:49 asp

感謝，myUL華里的原因，當我刪除這個CSS，沒有出現的Horizonate滾動。我插你媒體的代碼，但它不工作，horizonatll雙擊自動滾屏顯示：/ –

OK，那麼你需要添加一個'體{溢出-X：隱藏}'。這工作正常。 – asp

是的，我說這和它的作品，非常感謝:) –

如何防止引導和列表中的水平滾動？

回答

相關問題