asked 7年 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″ 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;
}
お願いいたします。
狩野 祐東 Staff answered 7年 ago
ソースコードを見る限り、ナビゲーションメニューの項目（<li>）のHTMLと、そこに適用されるCSSは間違っていないようですね。
もしかして、HTMLのコメントの部分が、「<!─ 〜 ─>」と、全角の傍線になっていませんか？ 正しくは「<!– 〜 –>」と、半角のマイナス（-）2文字です。この部分を直してみて、直らなかったらまたご連絡ください。