水平滚动右侧的间隙答案

【问题标题】：Gap on the right side with horizontal scroll水平滚动右侧的间隙
【发布时间】：2017-12-03 10:14:24
【问题描述】：

我有一个水平滚动，因为在一定宽度后页面右侧有空间。我似乎无法修复它。我猜是轮播或bodyimg导致了问题。有人可以帮我说明我应该做什么以及在哪里吗？此外，我有一个 .btn:hover 在 CSS 中不起作用，我想更改默认按钮悬停样式，但我也不知道如何，如果有人能指出如何做到这一点，那就太好了！

编辑：我已经意识到这也发生在我的其他页面上，所以它可能不是我的轮播，而是我的页脚或导航？

@charset "UTF-8";

*{
	margin: 0;
}


.nopadding{

	padding: 0;
}


.navbar {
  background: url(../images/mainnav.png) no-repeat top center;
  border-radius: 0;
  border: 0;
  height: 100px;
  max-width: 980px;
  margin: 0 auto;
}

.navspace {
  padding: 30px 46px 30px 46px;
}

.navposition {
  margin-left: 100px;
}

.navbar-brand {
  padding: 0;
  position: relative;
  left: 40px;
  top: 10px;
}

.icon-bar {

}

.thumbnails {
	position: relative;
	margin-top: 150px;
}

#myCarousel {
	width: 980px;
	height: 654px;
	bottom: 25px;
	margin: 0 auto;

}

.carousel-control {
	height: 600px;
}


.banner {
	background: url(../images/banner1.png) no-repeat top center;
	background-size: cover;
	width: 980px;
	height: 654px;
	left: 110px;
	bottom: 30px;
	background-size:100% auto;
	

}

.banner p {
	position: relative;
	font-size: 25px;
	color: #fff;
	top: 440px;
	left: 20px;

}

.banner h1 {
	position: relative;
	font-size: 50px;
	color: #fff;
	left: 20px;
	top: 420px;
}

.bodyimg {
  max-width: 100%;
}

.bodytext1 {
	color: #ff8300;
}

.bodytext2 {
	color: #ff8300;
	width: 160px;
	margin-top: 37px;
}

.bodytext3 {
	color: #ff8300;
	margin-top: 60px
}

.bodytext4 {
	color: #ff8300;
	margin-top: 60px
}

.socialpadding {
	padding: 0px 10px 0px 10px;
	position: relative;
}

.centersocial {
	margin: 0 auto;
	position: absolute;
}

.contactinfo {

  color: #ff8300;
  margin: 200px 0px 0px auto;
  left: 50px;
}

/* Add a background color and some padding around the form */
.formarea {

  background:  url(../images/formbg.png) no-repeat ;
  width: 400px;
  height: 484px;
  margin-top: 50px;
  padding: 15px;
}

.formlabel {
  color: #fff;
}

.btn {
  background-color: #fcb972; 
  border-color: #ff9300;
}

.btn:hover {
  background-color: #fff; 
  border-color: #ff9300;
  color: #ff8300;
}

.btn:onclick {
  background-color: #fff; 
  border-color: #ff9300;
  color: #ff8300;
}

.messageform {
  height: 50px;
}

.google-maps {
        position: relative;
        padding-bottom: 75%;
        height: 0;
        overflow: hidden;
        margin-top: 50px;
    }
.google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% ;
        height: 100% ;
    }

.foot {

	background: url(../images/footer.png) no-repeat bottom center;
	height: 50px;
 	margin: 100px auto 0 auto;
 	position: absolute;
 	left: 0;
  	right: 0;

 	
}


footer {
	position: relative;
	color: #fff;
	display: block;
	text-align: right;
	margin-right: 350px;
	margin-top: 30px;
	font-size: 10px;

	

}




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

    #myCarousel.carousel {
    max-width:100%;
    width:100%;
    max-height: 100%;
    }

    .navbar { 
  background-image: none; 
  background-color: #ff8300; 
  } 

    .findus { 

  margin: 0 auto;
  } 

  .centersocial { 
  position: relative;
  left: 50%;
  transform: ;
  } 

  .bodytext4 { 
  text-align: center;
  width: 250px;
  margin: 100px auto 5px auto;
  } 

  .bodytext3 { 
  text-align: center;
  width: 250px;
  margin: 60px auto 5px auto;
  } 

  .foot { 
  background-image: none; 
  background-color: #ff8300; 
  } 
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


<div class="container nopadding">
  <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="bs-example-navbar-collapse-1" aria- expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html"><img src="images/logo.png" alt=""></a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-
collapse-1">
      <ul class="nav navbar-nav">
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navposition">
        <li class="navspace"><a href="index.html">Home</a></li>
        <li class="navspace"><a href="#">Menu</a></li>
        <li class="navspace"><a href="location.html">Location</a></li>
        <li class="navspace"><a href="contactus.html">Contact Us</a></li>
      </ul>
    </div> <!-- /.navbar-collapse -->
    </div> <!-- /.container-fluid -->
  </nav>

  <div class="row">
    <div class="col-sm-12">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active banner">
      <p>10% off all pizzas
        <br>this weekend only</p>
      <h1>LIMITED TIME<br>ONLY</h1>
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

  </div>

  <div class="row thumbnails">
    <div class="col-sm-offset-1 col-sm-3">
      <img class="img-responsive center-block" src="images/bodyimg.png" alt="">
    </div>
    <div class="col-md-offset-1 col-md-3 hidden-sm hidden-xs">
      <p class="bodytext1">
        Year 2004.<br><br>

        The warmth and comfort of wood-fired pizzas and traditional pastas over chilled drinks with friends and families became an everyday affair that started with the first Peperoni, located in Greenwood Singapore. Charming, vivacious and full of life, Peperoni Greenwood brings together food lovers from all walks of life. Including many well known and young artists whose work adorn its walls with their expressions of love and creativity. Peperoni Greenwood inspired its owners, the highly acclaimed Les Amis group, to spread the love and energy of Peperoni with the opening of new outlets across the sunny island of Singapore.
      </p>
    </div>
    <div class="col-md-offset-1 col-md-3 hidden-xs">

      <p class="bodytext2">
        Peperoni has since evolved into a much-loved destination with its ‘Appetite for Life’ philosophy. This philosophy makes Peperoni more than just a restaurant, as it is a place with a mission - to bring people together, to bind relationships, and to savour life in all its delightful flavours.<br><br>

        Share moments of fun, energy and inspiration over hot pizzas and cool conversations!

      </p>

    </div>
  </div>

  <div class="row">
    <div class="col-sm-offset-1 col-sm-3">

      <p class="bodytext3">

          Check us out on our social media accounts or subscribe to our newsletter for the latest updates!

      </p>

      <div class="centersocial">

        <a href="#"><img class="socialpadding"src="images/email.png" alt=""><a>
        <a href="https://www.instagram.com/peperonipizzeria/"><img class="socialpadding"src="images/insta.png" alt=""><a>
        <a href="https://www.facebook.com/peperonipizzeria/"><img class="socialpadding" src="images/fb.png" alt=""><a>


      </div>

    </div>
    <div class="col-sm-offset-1 col-sm-3">

      <p class="bodytext4">
        Feel free to come explore our outlets

      </p>

      <a href="locations.html"><img class="findus img-responsive" src="images/findus.png" alt=""><a>


    </div>
  </div>

  
</div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

【问题讨论】：

请不要在此处复制/粘贴所有代码，而是应该添加一个工作小提琴或sn-p！
谢谢，不知道 fiddle 或 sn-p 是什么，但我刚刚添加了它，没有我正在使用的图像。
你为哪个元素设置了certain width？
不太确定您要的是什么，但我为导航栏和轮播设置了宽度。导航栏最大宽度：980 像素，宽度：980 像素用于轮播。

标签： jquery html css twitter-bootstrap-3

【解决方案1】：

删除您在.centersocial 上为@media 断点 @media only screen and (max-width: 768px) 声明的left: 50% 属性，例如：

.centersocial {
  position: relative;
  /* left: 50%; remove this and consider alternatives which are responsive */
}

另外，在以下选择器上声明max-width: 100%：

.row, #myCarousel, .container {
    max-width: 100%;
}

@charset "UTF-8";
* {
  margin: 0;
}

.nopadding {
  padding: 0;
}

.navbar {
  background: url(../images/mainnav.png) no-repeat top center;
  border-radius: 0;
  border: 0;
  height: 100px;
  max-width: 980px;
  margin: 0 auto;
}

.navspace {
  padding: 30px 46px 30px 46px;
}

.navposition {
  margin-left: 100px;
}

.navbar-brand {
  padding: 0;
  position: relative;
  left: 40px;
  top: 10px;
}

.icon-bar {}

.thumbnails {
  position: relative;
  margin-top: 150px;
}

#myCarousel {
  width: 980px;
  height: 654px;
  bottom: 25px;
  margin: 0 auto;
}

.carousel-control {
  height: 600px;
}

.banner {
  background: url(../images/banner1.png) no-repeat top center;
  background-size: cover;
  width: 980px;
  height: 654px;
  left: 110px;
  bottom: 30px;
  background-size: 100% auto;
}

.banner p {
  position: relative;
  font-size: 25px;
  color: #fff;
  top: 440px;
  left: 20px;
}

.banner h1 {
  position: relative;
  font-size: 50px;
  color: #fff;
  left: 20px;
  top: 420px;
}

.bodyimg {
  max-width: 100%;
}

.bodytext1 {
  color: #ff8300;
}

.bodytext2 {
  color: #ff8300;
  width: 160px;
  margin-top: 37px;
}

.bodytext3 {
  color: #ff8300;
  margin-top: 60px
}

.bodytext4 {
  color: #ff8300;
  margin-top: 60px
}

.socialpadding {
  padding: 0px 10px 0px 10px;
  position: relative;
}

.centersocial {
  margin: 0 auto;
  position: absolute;
}

.contactinfo {
  color: #ff8300;
  margin: 200px 0px 0px auto;
  left: 50px;
}


/* Add a background color and some padding around the form */

.formarea {
  background: url(../images/formbg.png) no-repeat;
  width: 400px;
  height: 484px;
  margin-top: 50px;
  padding: 15px;
}

.formlabel {
  color: #fff;
}

.btn {
  background-color: #fcb972;
  border-color: #ff9300;
}

.btn:hover {
  background-color: #fff;
  border-color: #ff9300;
  color: #ff8300;
}

.btn:onclick {
  background-color: #fff;
  border-color: #ff9300;
  color: #ff8300;
}

.messageform {
  height: 50px;
}

.google-maps {
  position: relative;
  padding-bottom: 75%;
  height: 0;
  overflow: hidden;
  margin-top: 50px;
}

.google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.foot {
  background: url(../images/footer.png) no-repeat bottom center;
  height: 50px;
  margin: 100px auto 0 auto;
  position: absolute;
  left: 0;
  right: 0;
}

footer {
  position: relative;
  color: #fff;
  display: block;
  text-align: right;
  margin-right: 350px;
  margin-top: 30px;
  font-size: 10px;
}

@media only screen and (max-width: 768px) {
  #myCarousel.carousel {
    max-width: 100%;
    width: 100%;
    max-height: 100%;
  }
  .navbar {
    background-image: none;
    background-color: #ff8300;
  }
  .findus {
    margin: 0 auto;
  }
  .centersocial {
    position: relative;
  }
  .bodytext4 {
    text-align: center;
    width: 250px;
    margin: 100px auto 5px auto;
  }
  .bodytext3 {
    text-align: center;
    width: 250px;
    margin: 60px auto 5px auto;
  }
  .foot {
    background-image: none;
    background-color: #ff8300;
  }
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

/* additional */
* {
    box-sizing: border-box;
}

.row, #myCarousel, .container {
    max-width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


<div class="container nopadding">
  <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="bs-example-navbar-collapse-1" aria- expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html"><img src="images/logo.png" alt=""></a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-
collapse-1">
        <ul class="nav navbar-nav navposition">
          <li class="navspace"><a href="index.html">Home</a></li>
          <li class="navspace"><a href="#">Menu</a></li>
          <li class="navspace"><a href="location.html">Location</a></li>
          <li class="navspace"><a href="contactus.html">Contact Us</a></li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>

  <div class="row">
    <div class="col-sm-12">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="item active banner">
            <p>10% off all pizzas
              <br>this weekend only</p>
            <h1>LIMITED TIME<br>ONLY</h1>
          </div>

          <div class="item">
            <img src="chicago.jpg" alt="Chicago">
          </div>

          <div class="item">
            <img src="ny.jpg" alt="New York">
          </div>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

    </div>

    <div class="row thumbnails">
      <div class="col-sm-offset-1 col-sm-3">
        <img class="img-responsive center-block" src="images/bodyimg.png" alt="">
      </div>
      <div class="col-md-offset-1 col-md-3 hidden-sm hidden-xs">
        <p class="bodytext1">
          Year 2004.<br><br> The warmth and comfort of wood-fired pizzas and traditional pastas over chilled drinks with friends and families became an everyday affair that started with the first Peperoni, located in Greenwood Singapore. Charming, vivacious
          and full of life, Peperoni Greenwood brings together food lovers from all walks of life. Including many well known and young artists whose work adorn its walls with their expressions of love and creativity. Peperoni Greenwood inspired its owners,
          the highly acclaimed Les Amis group, to spread the love and energy of Peperoni with the opening of new outlets across the sunny island of Singapore.
        </p>
      </div>
      <div class="col-md-offset-1 col-md-3 hidden-xs">

        <p class="bodytext2">
          Peperoni has since evolved into a much-loved destination with its ‘Appetite for Life’ philosophy. This philosophy makes Peperoni more than just a restaurant, as it is a place with a mission - to bring people together, to bind relationships, and to savour
          life in all its delightful flavours.<br><br> Share moments of fun, energy and inspiration over hot pizzas and cool conversations!

        </p>

      </div>
    </div>

    <div class="row">
      <div class="col-sm-offset-1 col-sm-3">

        <p class="bodytext3">

          Check us out on our social media accounts or subscribe to our newsletter for the latest updates!

        </p>

        <div class="centersocial">

          <a href="#"><img class="socialpadding" src="images/email.png" alt="">
            </a>
              <a href="https://www.instagram.com/peperonipizzeria/"><img class="socialpadding" src="images/insta.png" alt="">
                </a>
                  <a href="https://www.facebook.com/peperonipizzeria/"><img class="socialpadding" src="images/fb.png" alt="">
                    </a>


        </div>

      </div>
      <div class="col-sm-offset-1 col-sm-3">

        <p class="bodytext4">
          Feel free to come explore our outlets

        </p>

        <a href="locations.html"><img class="findus img-responsive" src="images/findus.png" alt="">
          </a>


      </div>
    </div>


  </div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

【讨论】：

谢谢，现在水平滚动条不见了，但是东西不再居中，并且轮播没有一直延伸到移动端浏览器的右边缘。我的导航现在在桌面上也不合适。我想我用了左边：50%；之前将其居中。
@LukeSciberras 我特别提到了这个规则 (left: 50%) 应该被删除（因为它是导致水平溢出的因素之一），考虑更好的替代方案来居中这个元素（有很多）。问题的问题已经解决，即：纠正水平溢出。如果这已经充分完成，您应该将此答案标记为正确并考虑打开一个新问题来解决您指出的其他问题 - 它们是单独的问题，应该在单独的问题中解决。

【解决方案2】：

不要设置某些元素的width，而是设置它们的max-width并将它们的width设置为100%。

max-width 属性用于设置元素的最大宽度。这样可以防止 width 属性的值变得大于 max-width。

例如，在下一堂课上，您应该应用max-width 而不是width：

 #myCarousel {
 max-width: 980px;
 width:100%;
 ......
 .....
}

和

 .banner {
  background: url(../images/banner1.png) no-repeat top center;
  background-size: cover;
  max-width: 980px;/*this would be applied only when the width of the user screen is bigger then 920px*/
  width:100%;/* once the user screen in equal or smaller then 980px the widht of the element would be 100%  */
  .......
  }

【讨论】：

嗨，我已经这样做了，而且它似乎对大多数断点都有效，直到移动设备，右边的差距现在更大了。
那个桅杆是.banner {left: 110px;}并检查绝对位置

【解决方案3】：

一些建议：

使用编辑器来格式化你的html代码，它有助于指出一些错误
提供您的代码的在线版本以帮助人们与之交互，目前您的代码需要 bootstrap.min.css 和 botstrap.min.js 但没有提供版本。版本对于重现完全相同的情况很重要
提供图片或类似图片：logo、banner1.png、formbg.ng、mainnav.png、footer.png、chicago.png 等...缺失，没有它们我们无法确定不会参与您的问题。（您使用的是 W3C 示例，请指出）

问题：

HTML 代码缺少div 标签
引导程序版本未知（最新的 3.3.7 ？）
一些id 包含\n (bs-example-navbar-\ncollapse-1)
一些</li> 存在而没有<li>
在“行”类中使用“行”类。请参考 bootstrap 了解如何使用“row” div 和“col-xx-yy” div。如果之前没有指定 col-xx-yy，则不能在行中使用行中
文件末尾缺少</body></html>

关于宽度和滚动的问题：

css 明确指定轮播宽度：#myCarousel { width: 980px;。它不适合引导媒体查询和滚动条，因为您的宽度是固定的。

要解决此问题：

尽可能使用100% 宽度，它将坚持视口大小
如果您想为每个媒体指定特定大小，请使用媒体查询，因为您还指定了 654px 高度

或者只是坚持使用默认的 Carrousel（因为您从 W3C 中获取了这个示例）并且不要尝试为其设置特定的大小（h/w）。 Bootstrap 已经根据视口大小调整图像大小。只提供相同大小的图片。

【讨论】：

感谢您的建议！我在这一切都很糟糕，我只是一个（设计）学生，必须学习基本的网络开发！我现在使用 Sublime，这是我的学校教我们使用的。我添加了 max-width: 980px;和宽度：100%；到我的一些元素，但我仍然在 XS 中得到差距（我想，当我一直减小浏览器的宽度时）。我想设置一个固定的高度，因为我希望我的轮播在移动设备中占据整个屏幕，而不是缩小。
Sublime 能够重新格式化代码（搜索 sublime 文本格式代码）。如果您想要移动版本的整个页面，您应该知道您的移动目标，因为有多种设备和设备尺寸（+纵向/付费模式）+避免使用特定高度但使用专用图像尺寸。如果您想了解它是如何在台式机、平板电脑和移动设备之间的其他网站上完成的，这里有一个包含视图列表的网站：mediaqueri.es