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

Html 如何防止引导和列表中的水平滚动?,html,css,twitter-bootstrap,horizontal-scrolling,Html,Css,Twitter Bootstrap,Horizontal Scrolling,我有一个响应UL列表,许多Li ImageItem和span都在这个UL中。 在最大化大小时,3个项目显示在一行中,当我调整浏览器的大小(较小)时,显示2个项目,效果良好。但在我的浏览器中最小尺寸的水平滚动出现:(1项显示但滚动出现,我怎么能阻止水平滚动?! 这是我的css: .myUl { font-size:large !important; color:#373636 !important; text-align:center !important; } .myUl

我有一个响应UL列表,许多Li ImageItem和span都在这个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>

  • 这里有一些文字
  • .........

当屏幕宽度小于360px时,以下代码可能导致水平滚动,


当浏览器大小低于350px时,如果您需要解决此问题,您的浏览器将显示一个水平滚动条,您需要为此编写媒体查询,如下所示:

@media only screen and (max-width: 360px) {
  .myUl li {
      width:100% !important;
  }
}

您还可以使用属性
body{overflow-x:hidden;}

当屏幕宽度小于
360px时,以下代码可能导致水平滚动,


当浏览器大小低于350px时,如果您需要解决此问题,您的浏览器将显示一个水平滚动条,您需要为此编写媒体查询,如下所示:

@media only screen and (max-width: 360px) {
  .myUl li {
      width:100% !important;
  }
}

您也可以使用属性
body{overflow-x:hidden;}

来防止水平滚动,只需将其添加到Css中的body标记中,如下所示:

body {
    overflow-x: hidden;
}

希望这有助于防止水平滚动,只需将其添加到Css中的body标记中,如下所示:

body {
    overflow-x: hidden;
}

希望这有帮助

是哪个元素导致了滚动?检查元素并让我知道:)您能分享任何JSFIDLE或工作演示,我们可以在现场看到问题吗?那会有帮助的..Thanx我真的不知道是哪个元素导致了这个,我改变了每件事,但仍然滚动显示,我试图在JSFIDDLE中显示哪个元素导致了滚动?检查元素并让我知道:)您能分享任何JSFIDLE或工作演示,我们可以在现场看到问题吗?那会有帮助的..Thanx我真的不知道是哪个元素导致了这个,我改变了每件事,但仍然滚动显示,我正在尝试用JSFIDDLE显示它谢谢,myUL li是原因,当我删除这个css时,Horizonatl滚动不显示。我向您插入了媒体代码,但它不起作用,并且出现了horizontatl scrool:/ok,然后您需要添加一个
主体{overflow-x:hidden}
。这很好用。谢谢,myUL li是原因,当我删除这个css时,Horizonatl滚动条不会出现。我向您插入了媒体代码,但它不起作用,并且出现了horizontatl scrool:/ok,然后您需要添加一个
主体{overflow-x:hidden}
。这很好。没问题,很高兴我能帮助@ShimaAdmini。没问题,很高兴我能帮助@ShimaAdmini