如何防止引导和列表中的水平滚动？

我有一个负责任的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

是的，我说这和它的作品，非常感谢:) –

如何防止引导和列表中的水平滚动？

回答

相关问题