1
私はウェブデベロッパーにとって非常に新しく、これは私が構築している最初のウェブサイトです。ナビゲーションバーはコンテナと同じではありません
私はナビゲーションバーでしばらく時間を費やしましたが、バーの幅がコンテナの最後に届くようにはできません。私は、私が抱えている問題を示すための写真を含んでいます。
1写真とナビゲーションバーは両方ともコンテナ内にありますが、私は両方の写真が並んでいるようにしたいと思います。
HTML & CSS：
<html>
<body>
\t \t <div class="header">
\t \t \t \t <div class="container">
\t \t \t \t \t <div class="logo"></div>
\t \t \t \t \t <div id="nav">
\t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t <li><a class="active" href="#index">Home</a></li>
\t \t \t \t \t \t \t <li><a href="#news">News</a></li>
\t \t \t \t \t \t \t <li><a href="#music">Music</a></li>
\t \t \t \t \t \t \t <li><a href="#about">About Us</a></li>
\t \t \t \t \t \t \t <li><a href="#contact">Contact Us</a></li>
\t \t \t \t \t \t </ul>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="cover"></div>
\t \t \t \t </div>
\t \t </div>
\t <!-- Latest compiled and minified JavaScript -->
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
body {
\t background-color: #505290 !important;
}
.header {
\t background-image: url(nlbg.jpg);
\t background-size: cover;
\t background-position: center center;
\t height: 10em;
\t width: 100%;
}
.logo {
\t content: url(nnlogo.png);
\t height: 120px;
}
#nav ul {
list-style-type: none;
background-color: #333;
text-align: center;
padding: 0;
margin: 1.4em;
}
#nav li {
font-family: arial, sans-serif;
font-size: 1.5em;
line-height: 40px;
height: 40px;
display: inline-block;
width: 19%;
}
#nav a{
display: block;
color: white;
}
#nav a:hover {
background-color: #111;
}
#nav a.active {
background-color: #black;
color: #505290;
}
.cover {
content: url(cover.jpg);
}
</style>
</body>
</html>
マージン0 ul。 –