我有一个响应性的UL列表,此Li中有许多Li ImageItem和span。最大化显示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>
我的页面图片
为了防止水平滚动,只需将其添加到CSS的body标签中,如下所示:
body {
overflow-x: hidden;
}
希望这有所帮助
当屏幕宽度小于360px
时,您的以下代码可能会导致水平滚动,
.myUl li {
width:350px !important;
}
当浏览器大小低于350px时,浏览器将显示水平滚动条。如果您需要解决此问题,则需要为此编写媒体查询,如下所示:
@media only screen and (max-width: 360px) {
.myUl li {
width:100% !important;
}
}
也可以使用属性body { overflow-x: hidden; }