I am fairly new to this kind of stuff. I just want my nav bar to cover the page from side to side instead of having the white spaces on both sides and the top.
Here is my CSS
nav ul {list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3E3F43;}
nav li {float: left;}
nav li a {display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;}
li a:hover{background-color: #7559A6;}
Here is my HTML
<nav>
<ul>
<li><a href="home.html" class="active">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
give your nav an id
<nav id=nav">
And set it's width to 100%
#nav{
width:100%;
}
Firstly, remove the default margin from the body
body {
margin: 0;
}
Then:
CSS tables
body { margin: 0; } nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #3E3F43; display: table; width: 100%; } nav li { display: table-cell } nav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #7559A6; }
<nav> <ul> <li><a href="home.html" class="active">Home</a> </li> <li><a href="about.html">About</a> </li> <li><a href="resume.html">Resume</a> </li> <li><a href="blog.html">Blog</a> </li> <li><a href="contact.html">Contact</a> </li> </ul> </nav>
Flexbox
body { margin: 0; } nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #3E3F43; display: flex; } nav li { flex:1; } nav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #7559A6; }
<nav> <ul> <li><a href="home.html" class="active">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="resume.html">Resume</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav>
添加你的CSS
nav{ position: absolute; width: 100%;left: 0;top: 0;}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.