0
ちょうどhtml5とcssで遊んで、フルサイズのメニューを表示しようとしています。メニューの幅をhtml5で全幅に伸ばすには
問題がどこにあるのか理解するのに何時間もかかりましたが、うまく動作しませんでした。
私はあなたの助けが必要です。
* {
\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、多くのありがとう。すぐに私はフォントの太さでタイプミスを修正しました。 –