2017-03-01 32 views
0

這裏是我遇到的問題的截圖:如何在導航欄上刪除空白

Header

我不能爲我的生活弄清楚如何去除兩側的空白處導航欄。我試過使邊距和填充0,但它一直沒有工作。任何幫助,將不勝感激。

下面是HTML:

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    background-image: url("images/bg.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-position: center top; 
 
    font-family: Times New Roman; 
 
} 
 

 
header { 
 
    clear: both; 
 
    text-align: center; 
 
} 
 

 
#header img { 
 
    height: 40%; 
 
    width: 40%; 
 
} 
 

 
#wrap { 
 
    width: 1000px; 
 
    margin: auto; 
 
    padding: auto; 
 
    overflow: auto; 
 
} 
 

 
ul { 
 
    padding: 0; 
 
} 
 

 
nav ul { 
 
    margin: auto; 
 
    padding: auto; 
 
    list-style-type: none; 
 
    background-color: #009BB2; 
 
} 
 

 
nav li { 
 
    display: inline; 
 
    padding-left: 10px; 
 
} 
 

 
nav a { 
 
    text-decoration: none; 
 
    padding: 5px; 
 
    font-family: Times New Roman; 
 
    font-size: 25px; 
 
    color: maroon; 
 
} 
 

 
nav a:hover { 
 
    color: blue; 
 
} 
 

 
img.size { 
 
    height: 15%; 
 
    width: 15%; 
 
    padding: 5px; 
 
} 
 

 
section h1 { 
 
    text-align: center; 
 
} 
 

 
figure { 
 
    float: right; 
 
    overflow: hidden; 
 
    margin: 0px; 
 
    padding: 0px; 
 
}
<div id="wrap"> 
 
    <header> 
 
    <div id="header"> 
 
     <img src="logo.png" alt="The Seasons" /> 
 
    </div> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="">Fall</a></li> 
 
     <li><a href="">Spring</a></li> 
 
     <li><a href="">Summer</a></li> 
 
     <li><a href="">Winter</a></li> 
 
     <li><a href="">Home</a></li> 
 
     </ul> 
 

 
    </nav> 
 
    </header> 
 

 
    <section> 
 
    <h1>The Four Seasons of the Earth</h1> 
 
    <figure class="fig"> 
 
     <img class="size" src="images/fall_front.png" alt="Fall" /> 
 
    </figure> 
 
    <figure class="fig"> 
 
     <img class="size" src="images/winter_front.png" alt="Winter" /> 
 
    </figure> 
 

 
    <figure class="fig"> 
 
     <img class="size" src="images/spring_front.png" alt="Spring" /> 
 
    </figure> 
 

 
    <figure class="fig"> 
 
     <img class="size" src="images/summer_front.png" alt="Summer" /> 
 
    </figure> 
 

 

 
    </section> 
 

 

 

 
</div>

+0

? –

+0

我沒有看到問題? nav爲我延伸到'#wrap'的遠端。你的代碼是否準確地重現了佈局問題? http://codepen.io/anon/pen/JWGOpR –

+1

我相信傑夫米勒有正確的答案,但你可能想澄清,如果你想縮短你的導航背景的寬度,或者如果你想導航100%寬度 – Klav

回答

1

添加display: inline-block;nav ul選擇,並且會從側面去掉空格。

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    background-image: url("images/bg.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-position: center top; 
 
    font-family: Times New Roman; 
 
} 
 

 
header { 
 
    clear: both; 
 
    text-align: center; 
 
} 
 

 
#header img { 
 
    height: 40%; 
 
    width: 40%; 
 
} 
 

 
#wrap { 
 
    width: 1000px; 
 
    margin: auto; 
 
    padding: auto; 
 
    overflow: auto; 
 
} 
 

 
ul { 
 
    padding: 0; 
 
} 
 

 
nav ul { 
 
    margin: auto; 
 
    padding: auto; 
 
    list-style-type: none; 
 
    background-color: #009BB2; 
 
    display: inline-block; 
 
} 
 

 
nav li { 
 
    display: inline; 
 
    padding-left: 10px; 
 
} 
 

 
nav a { 
 
    text-decoration: none; 
 
    padding: 5px; 
 
    font-family: Times New Roman; 
 
    font-size: 25px; 
 
    color: maroon; 
 
} 
 

 
nav a:hover { 
 
    color: blue; 
 
} 
 

 
img.size { 
 
    height: 15%; 
 
    width: 15%; 
 
    padding: 5px; 
 
} 
 

 
section h1 { 
 
    text-align: center; 
 
} 
 

 
figure { 
 
    float: right; 
 
    overflow: hidden; 
 
    margin: 0px; 
 
    padding: 0px; 
 
}
<div id="wrap"> 
 
    <header> 
 
    <div id="header"> 
 
     <img src="logo.png" alt="The Seasons" /> 
 
    </div> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="">Fall</a></li> 
 
     <li><a href="">Spring</a></li> 
 
     <li><a href="">Summer</a></li> 
 
     <li><a href="">Winter</a></li> 
 
     <li><a href="">Home</a></li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 

 
    <section> 
 
    <h1>The Four Seasons of the Earth</h1> 
 
    <figure class="fig"> 
 
     <img class="size" src="images/fall_front.png" alt="Fall" /> 
 
    </figure> 
 
    <figure class="fig"> 
 
     <img class="size" src="images/winter_front.png" alt="Winter" /> 
 
    </figure> 
 

 
    <figure class="fig"> 
 
     <img class="size" src="images/spring_front.png" alt="Spring" /> 
 
    </figure> 
 

 
    <figure class="fig"> 
 
     <img class="size" src="images/summer_front.png" alt="Summer" /> 
 
    </figure> 
 
    </section> 
 
</div>

0

你在1000像素杏寬度:

#wrap{ 
    width:1000px; 
} 

淨資產值已內的,所以它不能伸展比寬。

0

正如其他人所指出的,您將寬度設置爲1000px;

變化#wrap{width: 1000px}#wrap{width: 100%}要刪除兩側的空綠色