Question

我想让我的标题一直在我的页面上（相对于我的屏幕缩放大小）而没有水平滚动。

HTML，CSS和JS都位于此处： http://hastebin.com/tenupuwace.xml

谢谢，需要尽快回答。

另外，如果需要，请在CodePen中查看。

Again, http://hastebin.com/tenupuwace.xml for the HTML, CSS, and JS. http://codepen.io/ccrama/pen/EaDwq

Answer 1

Demo on Pen

使用此单位vw，重置您的风格并避免在header＆amp; menu

注意：请务必关闭代码，然后将<slider>替换为<figure>，请参阅HTML structural elements - W3C Wiki并在使用前定义字体。

   @font-face {
      font-family: 'Oswald';
      font-style: normal;
      font-weight: 300;
      src: local('Oswald Light'), local('Oswald-Light'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/HqHm7BVC_nzzTui2lzQTDT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
    }

    @font-face {
      font-family: 'Oswald';
      font-style: normal;
      font-weight: 400;
      src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
    }
    @font-face {
      font-family: 'Oswald';
      font-style: normal;
      font-weight: 700;
      src: local('Oswald Bold'), local('Oswald-Bold'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
    }
*{box-sizing: border-box;padding: 0; margin: 0}

:root, body{
    width: 100vw
}

header {
  background: #2d2d2d;
  width: 100%;
  height: 112px;
}


.logo {
  margin-top: 20px;
  margin-left: 150px;
  width: 262px;
}
.item {
  list-style: none;
  background: #2D2D2D;
  font-family: oswald;
  margin-bottom: 20px;
  color: #ffffff;
  width: 200px !Important;
  position: relative;
    z-index: 1;

  font-size: 20px;
  padding: 10px;
}
#items img {
  list-style: none;
    z-index: 999999999999999999999999999999999999999;
  position: relative;

  width: 650px !important;
}
#items {
  margin-left: 125px;
  float: left;
}
.top {
  position: absolute;
    background: #f3953c;
  border: none !important;
  color: #ffffff;
  border-radius: 5px;
  font-family: oswald;
  font-weight: 500;
  height: 45px;
  cursor: pointer;
  padding: 5px;
  font-size: 20px;
  margin-left: -630px;
  margin-top: 25px;
}
#items li {
  list-style: none;
}
.player {
  float: left;

}
#left {
  float: left;
  margin-left: -30px;
  z-index: 0;
}
.active {
  background-color: #f3953c !Important;
  margin-left: -10px;
  padding-left: 20px;
}
.join {
  background: #f3953c;
  border: none !important;
  color: #ffffff;
  border-radius: 5px;
  font-family: oswald;
  font-weight: 500;
  position: absolute;
  right: 150px;
  top: 25px;
  height: 45px;
  cursor: pointer;
  padding: 5px;
  font-size: 20px;
}
menu {
  background: #373737;
  height: 60px;
  width: 100%;
  border-bottom: 5px solid #f3953c;
}
#menu li {
  list-style: none;
  font-family: oswald;
  font-size: 20px;
  margin-top: 35px;
  float: left;
  color: #ffffff;
  padding: 10px;

}
#menu {
  position: absolute ;
  left: 120px;
  margin-top: -31px

}
#menu li:hover {


background: #ffffff !Important;
      color: #f3953c !important;
      border-top: 5px solid #f3953c;
      margin-top: 30px;
      cursor: pointer;
      padding-bottom: 21px;
    }
    .left {
      margin-right: 500px !Important;
    }
    #ticker {
      font-family: oswald;
      color: #ffffff;
      font-size: 20px;
      margin-top: -70px;
      margin-left: 30px;

      margin-right: 150px;
      float: right;
    }
orange {
  color: #f3953c !Important;
}

Answer 2

也许我没有正确阅读您的代码，但您没有任何正文和标题标记。

你不应该使用标签，你应该使用它，它应该遍及整个页面。

页面的基本结构应为：

<html>
<head>
 - all your stylesheet references in here
</head>
<body>
- All layout items in your page go here
</body>
</html>

如果它还在滚动:(我看不到一个有效的例子）

添加overflow-x：none;

到你的标题类（以及它之前的点）

.header {
  background: #2d2d2d;
  width: 100%;
  height: 112px;
  margin-left: -300px;
  padding-left: 300px;
  margin-right: -300px;
  padding-right: 300px;
  margin-top: -7px;
  overflow-x: none;
}

希望有所帮助

如何在没有水平滚动的情况下使标题一直穿过屏幕

2 个答案: