0
只是隨便使用html5和css，並且我試圖給出一個全寬菜單。我如何在html5中將菜單的寬度拉伸到全寬
我花了幾個小時試圖找出問題所在，但無法使其工作。
我需要你的幫助。
這是我的HTML5和CSS代碼：
* {
\t margin: 0;
\t padding: 0;
\t font-size: 15px;
}
header{
\t
}
.nav {
\t display: inline-block;
\t position: relative;
\t font-weight: 900
\t width: 100%;
\t background:#34495E;
\t text-align: center;
}
.nav-list {
}
.nav-item {
\t text-align: center;
\t display: inline-block;
\t width: 100px;
}
.nav-item a {
display:block;
padding:20px 20px;
color:#FFF;
width: 100%;
}
ul li.selected {
\t background: #fff;
}
ul li.selected a {
\t color: #384047;
}
.nav-item a:hover {
background: tomato;
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
.nav {
width:100%;
}
.nav-item {
width:100%;
float:none;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
\t <title>This is the index</title>
\t <link rel="stylesheet" href="css/styles.css" />
\t <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
\t <!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
\t <header>
\t \t <!--<div id="logo" class="">
\t <h1>XYZ</h1>
</div> \t -->
\t \t <nav class="nav">
\t \t \t <ul class="nav-list">
\t \t \t \t <li class="nav-item"><a href="#">Home</a></li>
\t \t \t \t <li class="nav-item"><a href="#">About</a></li>
\t \t \t \t <li class="nav-item"><a href="#">Contact</a></li>
\t \t \t </ul>
\t \t </nav>
\t </header>
\t <article>
\t \t \t \t
\t </article>
\t <footer>
\t \t Copyright | XYZ | 2016.
\t </footer>
\t <script src="js/jquery.js"></script> \t
</body>
</html>
關閉
font-weight:900你有一個錯字 - '字體重量：900（;）' - >分號不見了。另外，你不需要爲那個元素使用'inline-block'，因爲它只有一個。 – Vucko@ vucko，非常感謝。立即我解決了字體重量的錯誤，它的工作原理。 –