BOOK Studio947
狩野祐東・狩野さやか著書

ナビゲーションメニューのリスト項目が横並びにできません。

書籍Q&ACategory: スラスラわかるHTML&CSSのきほんナビゲーションメニューのリスト項目が横並びにできません。
asked 3年 ago

こんばんは、はじめまして。
リストがどうしても横並びにできません。
どこが間違っているのでしょうか、ご教授頂けると幸いです。

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>KUJIRA cafeへようこそ</title>
<link rel=”stylesheet” type=”text/css” href=”css/style.css”
</head>
<body>
<div class=”wrapper”>
<!– ヘッダー –>
<h1 id=”logo”><a href=index.html><img src=”images/logo.png” width=”217″ hight=”89″ alt=”KUJiRA cafe”></a></h1>
<ul id=”nav”>
<li><a href=”index.html”>ホーム</a></li>
<li><a href=”about.html”>店舗案内</a></li>
<li><a href=”access.html”>アクセス</a></li>
<li><a href=”menu.html”>メニュー</a></li>
<li><a href=”contact.html”>お問い合わせ</a></li>
</ul>
<!– ヘッダーここまで –>
<!– メイン –>
<div>
<img src=”images/keyvisual.jpg” width=”900″ height=”362″ alt=””>
</div>
<h2 id=”news”>News</h2>
<p>5月30日、<a href=”http://www.sbcr.jp/products/4797372960.html?sku=4797372960&#8243; target=”blank”>『ここでしか飲めない!おいしいうれしい満喫カフェ』</a>に掲載されました。</p>
<p>4月18日、KUJIRA cafeがオープンしました。ここ九寺楽の町で、皆さんが気軽に立ち寄れる、ゆったりと時間を過ごせる落ち着いた場所にしたいと思っています。</P>
<!– メインここまで –>
<!– フッター –>
<div id=”footer”>
<p>©copyright KUJIRA cafe. All rights reserved.</p>
</div>
<!– フッターここまで –>
</div>
</body>
</html>

ーーーーーーーーーーーーーーーーーーーーーーーーーー

css

@charset “UTF-8”;

/*すべてのページに適用される*/
body{
background-color:#f5f3eb;
}
h2{
color:#442220;
font-size:18px;
border-bottom-width:2px;
border-bottom-style:dotted;
border-bottom-color:442220;
margin-top:20px;
margin-right:0px;
margin-bottom:20px;
margin-left:0px;
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
}
p{
line-height:160%;
}
a:link{
coloer:#6aa4d6;
}
a:visited{
coloer:#6aa4d6;
}
a:hover{
coloer:#4f7697;
}
a:active{
coloer:#aed3f2;
}
h1{
margin:30px 0 30px 0;
padding:0 0 0 0;
line-height:0;
text-align:center;
img{
border-style:none;
}

/* すべてのページに適用 – navまわり – */
#nav li{
display:inline;
list-style-type:none;
padding-right:30px;
}

お願いいたします。

3 Answers
狩野 祐東 Staff answered 3年 ago

ソースコードを見る限り、ナビゲーションメニューの項目(<li>)のHTMLと、そこに適用されるCSSは間違っていないようですね。

もしかして、HTMLのコメントの部分が、「<!>」と、全角の傍線になっていませんか? 正しくは「<!– 〜 –>」と、半角のマイナス(-)2文字です。この部分を直してみて、直らなかったらまたご連絡ください。

answered 3年 ago

上記訂正点の修正をしましたが反映されません。

他もすべて半角に訂正してみたんですが・・

answered 3年 ago

h1の } が無いが為に反映されてませんでした。

引き続き参考にさせていただきます、
よろしくお願いします。