這裏是我遇到的問題的截圖:如何在導航欄上刪除空白
我不能爲我的生活弄清楚如何去除兩側的空白處導航欄。我試過使邊距和填充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>
? –
我沒有看到問題? nav爲我延伸到'#wrap'的遠端。你的代碼是否準確地重現了佈局問題? http://codepen.io/anon/pen/JWGOpR –
我相信傑夫米勒有正確的答案,但你可能想澄清,如果你想縮短你的導航背景的寬度,或者如果你想導航100%寬度 – Klav