Question

网站是getfarmerfit.com

除非缩小到50％，否则在桌面版上看起来没问题。然后它会显示slider that's created by with jQuery右侧的空白区域。我尝试过overflow-x-hidden而且它没有用。我已经尝试找到一些据称在移动版本上没有缩放/缩小功能的元模型，但仍然无法正常工作。

任何建议都会有用。

＆＃13;

.scroller_roll{
    padding: 0px;
    margin: 0px;
    clear: both;
    overflow: hidden;
    /*overflow-y: auto;*/
    white-space: nowrap;
    align-self: center;
}
.scroller_roll ul{
    align-self: center;
    padding: 0px;
    margin: 0px;
    float: left;
    white-space: nowrap;
    clear: both;
    overflow: hidden;
}
.scroller_roll ul li{
    padding: 0px;
    margin: 0px;
    list-style: none;
    align-self: center;
    /*clear: both;*/
    /*text-align: center;*/
    display: inline-flex;
    overflow: hidden;
}
.scroller_roll ul li a{
    text-decoration: none;
}
.scroller_roll ul li a:hover{
    text-decoration: underline;
}
.scroller_roll ul li a img{
    border: none;
    overflow: hidden;
    margin: 0px;
}

＆＃13;

<!-- Slide Show -->

<!-- <div id=="tech-slideshow">
	<div class="tech-slideshow">
  		<div class="mover-1"></div>
  		<div class="mover-2"></div>
	</div>
</div> -->
<div id="scroller_roll1" class="scroller_roll">
    <ul>
        <li><img src="img/resources/css_slider_images/elaine_dips.jpg" width="300" height="300" alt="Farmer Fitness"/></li>
        <li><img src="img/resources/css_slider_images/fierce_randy.jpg" width="300" height="300"  alt="Farmer Fitness"/></li>
        <li><img src="img/resources/css_slider_images/janette_swings.jpg" width="300" height="300" alt="Farmer Fitness"/></li>
        <li><img src="img/resources/css_slider_images/johany_back.jpg" width="300" height="300" alt="Farmer Fitness"/></li>
        <li><img src="img/resources/css_slider_images/jose_pushdowns.jpg" width="300" height="300" alt="Farmer Fitness"/></li>
        <li><img src="img/resources/css_slider_images/large_group.jpg" width="300" height="300" alt="Farmer Fitness"/></li>
        <li><img src="img/resources/css_slider_images/leah_flys.jpg" width="300" height="300" alt="Farmer Fitness"/></li>
        <li><img src="img/resources/css_slider_images/randy_sled.jpg" width="300" height="300" alt="Farmer Fitness"/></li>
        <li><img src="img/resources/css_slider_images/shoulder_press.jpg" width="300" height="300" alt="Farmer Fitness"/></li>
        <li><img src="img/resources/css_slider_images/steven_pullups.jpg" width="300" height="300" alt="Farmer Fitness"/></li>
        <li><img src="img/resources/css_slider_images/leah_leg_out.jpg" width="300" height="300" alt="Farmer Fitness"/></li>
        <li><img src="img/resources/css_slider_images/renegade_row_girls.jpg" width="300" height="300" alt="Farmer Fitness"/></li>
        <li><img src="img/resources/css_slider_images/side_plank.jpg" width="300" height="300" alt="Farmer Fitness"/></li>
        <li><img src="img/resources/css_slider_images/leah_guns.jpg" width="300" height="300" alt="Farmer Fitness"/></li>
        <li><img src="img/resources/css_slider_images/three_ladies.jpg" width="300" height="300" alt="Farmer Fitness"/></li>
        <li><img src="img/resources/css_slider_images/woman_pushups.jpg" width="300" height="300" alt="Farmer Fitness"/></li>
    </ul>
    <div style="clear: both"></div>
</div>

<!-- Slide Show Ends -->

＆＃13;

Answer 1

我的解决方案是将滚动条包装在另一个div中并应用＆＃34; overflow-x：hidden＆＃34;对此，它消除了这个问题。

如何摆脱移动版本中的空白区域

1 个答案: