我想讓我的頁眉橫過我的頁面（相對於我的屏幕縮放大小）無需水平滾動。如何在不橫向滾動的情況下讓頁眉橫跨整個屏幕
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
使用本單位vw，重置你的風格和避免header & menu
注negatif保證金：永遠閉上你的標籤和更換<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;
}
也許我沒有正確讀取您的代碼，但是您沒有任何正文和標題標記。
你不應該使用標籤，你應該使用一個標籤，它應該貫穿整個頁面。
你的頁面的基本結構應該是：
<html>
<head>
- all your stylesheet references in here
</head>
<body>
- All layout items in your page go here
</body>
</html>
如果它還是滾動：（我看不到一個工作示例）
附加溢出-X：無;
你的頭類（和之前的點爲好）
.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;
}
希望幫助
它沒有工作，我不知道爲什麼。這裏是該文件，希望你能找到一個方法。 https://www.mediafire.com/?c974211z4zbzs84 – 2014-12-05 03:34:45
使用'header'有什麼問題Sir？ – 2014-12-05 03:35:10
@Tambo我很困惑，但我想我只是想出了你的方法。謝謝。 :) – 2014-12-05 03:38:31
除了使用填充和利潤率在100％的寬度項目非常奇怪的CSS樣式 - 迫使滾動條出現，你使用不存在的結構元素。 http://www.w3schools.com/html/html5_new_elements.asp – Christina 2014-12-05 03:24:47