我一直无法让我的导航完全跨越列,尽管我已经指定了想要导航条延伸的列,如果您能查看我的代码并指出我的错误,那将非常棒。
以下是浏览器中HTML文件的图像。
以下是浏览器中HTML文件的图像。
body {
margin: 0;
padding: 0;
}
.container {
max-width: 960px;
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: 4fr 1fr;
grid-template-rows: 50px auto;
}
.mainnav {
grid-column: 1 / 2;
grid-row: 1 / 1;
background-color: #5eccc0;
}
.navul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navli {
float: left;
text-align: center;
}
.navli a {
display: block;
text-decoration: none;
}
main {
grid-column: 1 / 1;
grid-row: 2 / 2;
background-color: #ffff77;
}
.sidebar {
background-color: #b200a4;
grid-column: 2 / 2;
grid-row: 2 / 2;
}
<div class="container">
<nav class="mainnav">
<ul class="navul">
<li class="navli"><a href="index.html">Home</a></li>
<li class="navli"><a href="contact.html">Contact</a></li>
<li class="navli"><a href="about.html">About</a></li>
</ul>
</nav>
<main>
<h1>Html Example Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim congue sapien, faucibus ultricies metus pulvinar nec. Vestibulum vitae mattis nibh. Sed nibh mauris, rhoncus id urna rutrum, dignissim luctus ligula. Pellentesque quis nulla
eget elit egestas dignissim. Vivamus blandit congue sem. Fusce eget condimentum massa, sit amet convallis erat. Proin in justo ac nisl vulputate vulputate id et sem. Donec consectetur mollis mi, ut tempor sem scelerisque in. Nulla facilisi.
<br>
<br> Nunc tempus lectus mi, ac posuere metus elementum vitae. Praesent non elit at lacus bibendum ornare. Sed pretium ultricies justo, fringilla sagittis ligula aliquam quis. Aenean aliquet euismod fringilla. Curabitur sit amet pharetra nisi. Donec
ac suscipit arcu, ac accumsan tortor. Ut facilisis egestas augue, laoreet tempus ligula. Morbi pulvinar arcu et lectus tincidunt condimentum. Mauris ut nisl at lectus condimentum suscipit.
<br>
<br> Vestibulum vel magna id lacus ullamcorper pretium vitae a eros. Sed vestibulum metus eu justo volutpat, nec facilisis lacus tempus. Nulla at maximus sapien, eget finibus massa. Phasellus pulvinar iaculis augue rhoncus aliquet. Vestibulum vitae
massa bibendum, pretium justo ultrices, fermentum turpis. Vestibulum id scelerisque lacus. In mattis viverra justo, vel suscipit enim egestas ac. Ut fringilla lobortis nulla, vitae tempus nibh fermentum ac. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae; Phasellus ac urna vitae arcu varius suscipit. Pellentesque nec nunc ligula. Sed sollicitudin pretium iaculis. Aliquam ut ex molestie, vulputate lacus vitae, dapibus lorem. Phasellus nec bibendum tortor.
</p>
</main>
<div class="sidebar">
<h2>Sidebar Example</h2>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</div>