html - 无缘无故向右滚动5个像素，如何解决？

标签 html css

问题是页面无缘无故左右滚动？

这是当前代码的codepen 正文边距和填充，因为如果我删除它，它会在页脚和页面末尾之间形成间隙；

codepen 

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Temp Test</title>
  <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>

<body>
  <div class="header">
    <div class="header-content">
      <h2>Notify</h2>
      <p>A great new free psd theme to showcase your new application.</p>
      <button><img src="http://i.imgur.com/zE3sKOv.png" alt="Windows"></button>
      <button><img src="http://i.imgur.com/vR9AXQJ.png" alt="apple"></button>
      <button><img src="http://i.imgur.com/caCQeE7.png" alt="Android"></button>
    </div>
  </div>
  <div class="features">
    <div class="features-content_1">
      <div><img src="http://i.imgur.com/hCRBOyI.png" alt="gear">
        <h2>Editable Theme</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla.</p>
      </div>
    </div>
    <div class="features-content_1">
      <div><img src="http://i.imgur.com/hCRBOyI.png" alt="gear">
        <h2>Editable Theme</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla.</p>
      </div>
    </div>
    <div class="features-content_1">
      <div><img src="http://i.imgur.com/hCRBOyI.png" alt="gear">
        <h2>Editable Theme</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla.</p>
      </div>
    </div>
  </div>
  <div class="get-notified">
    <div class="text">
      <h3>Get Notified Of Any Updates!</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla nisl congue congue. Maecenas nec condimentum libero, at elementum mauris. Phasellus eget nisi dapibus, ultricies nisl at, hendrerit risusuis ornare luctus id
        sollicitudin ante lobortis at.</p>
      <form>
        <span class="email"><input type="email" placeholder="Email Adress" style=" text-align: center;
    border: none;
    border-radius: 8px;
    width: 260px;
    height: 31px;
    float:left;" /></span>
      </form>
      <input type="submit" name="Notify" style="cursor:pointer;border:none;background-color: #2ecc71;margin-left: -20px;/* height: 50px; */border-left: 5px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;height: 33px;" />
    </div>
    <div class="video-notified">
      <iframe width="600" height="300" src="https://www.youtube.com/embed/l9VFg44H2z8" frameborder="0" allowfullscreen style="
    float: right;
    width: 400px;
    height: 230px;
    padding-top: 50px;
    padding-right: 95px;
"></iframe>
    </div>

  </div>
  <div class="end">
    <div class="testi">
      <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu commodo nulla dapib us. Donec id sollicitudin urna. Integer at dui ac leo fermentum varius eleifend ut.”</p>
      <h4>Jane Hunt</h4>
    </div>
    <div class="get-social">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1152%C3%9760&w=1152&h=60">
      <h3>Say Hi & Get in Touch</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.</p>

      <a href="https://twitter.com/@_black_me_" target="_blank"><img src="http://i.imgur.com/mgWJfui.png" alt="twitter"></a>
      <a href="http://www.facebook.com/abdoo.sorcerer" target="_blank"><img src="http://i.imgur.com/G4YerKE.png" alt="facebook"></a>
      <a href="#"><img src="http://i.imgur.com/8gpGXZD.png" alt="youtube"></a>
      <a href="#"><img src="http://i.imgur.com/lADlqJt.png" alt="linked-in"></a>

    </div>
  </div>

</body>
<footer>

</footer>

</html>

最佳答案

使用下面的代码 只需删除边距:-8px；从任何地方添加 margin-top: -8px;在你的 .header 类中

(这个 -8 边距会在您的页面中创建额外的 8px，所以这就是滚动条出现的原因，只需将其删除并按照下面的代码进行操作即可)

<!DOCTYPE html><html class=''>
    <head><script src='//assets.codepen.io/assets/editor/live/console_runner-d0a557e5cb67f9cd9bbb9673355c7e8e.js'></script><script src='//assets.codepen.io/assets/editor/live/events_runner-21174b4c7273cfddc124acb0876792e0.js'></script><script src='//assets.codepen.io/assets/editor/live/css_live_reload_init-7618a0de08795409d8f6c9ef6805f7b2.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/Iwillsolo/pen/EyJaro" />


<style class="cp-pen-styles">@charset "utf-8";

/* CSS Document */

body {
  margin:0;
  padding:0;
}

.header {
  background-image: url('http://i.imgur.com/5BABBRC.png');
  height: 500px;
  margin-top: -8px;
  border-top: 7px solid #2ecc71;
  overflow: visible;
}

div button {
  background-color: rgba(31, 12, 9, 0.32);
  width: 56px;
  height: 53px;
  border: none;
  border-radius: 100px;
}

div button:hover {
  background-color: #797966;
  cursor: pointer;
}

.header .header-content {
  margin: auto;
  text-align: center;
  padding-top: 257px;
  padding-right: 643px;
}

.header .header-content h2 {
  padding-right: 300px;
  color: #2ecc71;
}

.features {
  width: 100%;
  height: 295px;

  margin-top: 8px;
}

.features .features-content_1 {
  margin: auto;
  padding-top: 60px;
  margin-left: 80px;
  text-align: center;
  width: 400px;
  float: left;
}

.features .features-content_1 img {
  width: 60px;
}

.get-notified {
  height: 355px;

  background-color: #e3e3e3
}

.get-notified .text {
  width: 401px;
  text-align: justify;
  margin-left: 100px;
  padding-top: 25px;
  float: left;
}

.get-notified .video-notified {
  width: 642;
  height: 377px;
  float: right;
}

.end {
  height: 400px;

}

.end .testi {
  width: 800px;
  position: relative;
  left: 350px;
  text-align: center;
}

.get-social {
  text-align: center;
}

.get-social a {
  padding-left: 10px;
}

footer {
  background-color: #e3e3e3;
  height:150px;
}</style></head><body>
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Temp Test</title>
  <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>

<body>
  <div class="header">
    <div class="header-content">
      <h2>Notify</h2>
      <p>A great new free psd theme to showcase your new application.</p>
      <button><img src="http://i.imgur.com/zE3sKOv.png" alt="Windows"></button>
      <button><img src="http://i.imgur.com/vR9AXQJ.png" alt="apple"></button>
      <button><img src="http://i.imgur.com/caCQeE7.png" alt="Android"></button>
    </div>
  </div>
  <div class="features">
    <div class="features-content_1">
      <div><img src="http://i.imgur.com/hCRBOyI.png" alt="gear">
        <h2>Editable Theme</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla.</p>
      </div>
    </div>
    <div class="features-content_1">
      <div><img src="http://i.imgur.com/hCRBOyI.png" alt="gear">
        <h2>Editable Theme</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla.</p>
      </div>
    </div>
    <div class="features-content_1">
      <div><img src="http://i.imgur.com/hCRBOyI.png" alt="gear">
        <h2>Editable Theme</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla.</p>
      </div>
    </div>
  </div>
  <div class="get-notified">
    <div class="text">
      <h3>Get Notified Of Any Updates!</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla nisl congue congue. Maecenas nec condimentum libero, at elementum mauris. Phasellus eget nisi dapibus, ultricies nisl at, hendrerit risusuis ornare luctus id
        sollicitudin ante lobortis at.</p>
      <form>
        <span class="email"><input type="email" placeholder="Email Adress" style=" text-align: center;
    border: none;
    border-radius: 8px;
    width: 260px;
    height: 31px;
    float:left;" /></span>
      </form>
      <input type="submit" name="Notify" style="cursor:pointer;border:none;background-color: #2ecc71;margin-left: -20px;/* height: 50px; */border-left: 5px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;height: 33px;" />
    </div>
    <div class="video-notified">
      <iframe width="600" height="300" src="https://www.youtube.com/embed/l9VFg44H2z8" frameborder="0" allowfullscreen style="
    float: right;
    width: 400px;
    height: 230px;
    padding-top: 50px;
    padding-right: 95px;
"></iframe>
    </div>

  </div>
  <div class="end">
    <div class="testi">
      <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu commodo nulla dapib us. Donec id sollicitudin urna. Integer at dui ac leo fermentum varius eleifend ut.”</p>
      <h4>Jane Hunt</h4>
    </div>
    <div class="get-social">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1152%C3%9760&w=1152&h=60">
      <h3>Say Hi & Get in Touch</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.</p>

      <a href="https://twitter.com/@_black_me_" target="_blank"><img src="http://i.imgur.com/mgWJfui.png" alt="twitter"></a>
      <a href="http://www.facebook.com/abdoo.sorcerer" target="_blank"><img src="http://i.imgur.com/G4YerKE.png" alt="facebook"></a>
      <a href="#"><img src="http://i.imgur.com/8gpGXZD.png" alt="youtube"></a>
      <a href="#"><img src="http://i.imgur.com/lADlqJt.png" alt="linked-in"></a>

    </div>
  </div>

</body>
<footer>

</footer>

</html>

</body></html>

关于html - 无缘无故向右滚动5个像素，如何解决？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39028067/

上一篇：javascript - tetxtbox 在复选框上启用/禁用使用 Javascript 选择/取消选择

下一篇：javascript - jQuery - 在 $(this) 上切换类并删除所有其他类

相关文章：

javascript - 保存和加载 div 位置 - 缩放并保存在加载时改变 div 位置

html - CSS，为什么这些 div 会堆叠在一起？

java - GWT CSS 语法无法正常工作

jquery - 有没有办法使用 JQuery 从 css 类获取类定义或值？

javascript - Prototype的inPlaceEditor中删除所有文本后无法编辑

css - IE9 边框半径

html - 如何在 css 文件中使用 header

html - CSS Sidebar - 内容区域需要边距，但宽度超出了带有滚动条的框架

html - 尝试在 Twitter Bootstrap 中自定义导航丸

javascript - <span> 按钮在标题类中不起作用？

©2024 IT工具网  联系我们