シンプルなコードはPenで動作しますが、エディタでは動作しません

このコードはエディタとブラウザでは動作しません。しかし、それはコーディングテストフォームであるPenで動作します。私は本当に混乱しています。シンプルなコードはPenで動作しますが、エディタでは動作しません

ポイントは、幅が980ピクセル未満に縮小されたときに、横に並べられたメニューから縦にリストされたメニューに簡単に変更することです。

/*media*/ 
 

 
@media screen and (max-width: 980px){ 
 
nav{background-color:white;width:100%;height:auto;} 
 
nav ul {font-family:jsr; font-size:18px; background-color:white;} 
 
     .ul li{float:none;display:block;} 
 
      nav li{float:none;display:block;} 
 
       li a { float:none;color: black; text-align: center;padding: 14px 16px; text-decoration: none; } 
 
        /* Change the link color to #111 (black) on hover */ 
 
       li a:hover {border-bottom:2px solid #113a21;  color:black; } 
 

 
} 
 

 

 
/*Navigation*/ 
 

 
    .ul li{float:left;}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 

 

 
<nav> 
 
    <span class="menu-trigger">Menu</span> 
 
    <ul class="ul"> 
 
    <li id="first"><a class="active" href="index.html">Home</a></li> 
 
    <li><a href="Vl.html">Verleih</a></li> 
 
    <li><a href="S.html">Service</a></li> 
 
    <li><a href="Vr.html">Vereine</a></li> 
 
    <li><a href="U.html">&Uumlber Uns</a></li> 
 
    <li><a href="K.html">Kontakt</a></li> 
 
    </ul> 
 

 
</nav> 
 

 

 
</body> 
 

 
</html>

出典

2016-10-24 Julian

どのエディタを使用していますか？エディタにエラーメッセージが表示されますか？そして、なぜjQueryタグですか？私はjQueryもJavaScriptも見ません。 – j08691

私はtext-wranglerを使用しています。そうではありません。しかし、まったく同じコードがペンで動作します！ – Julian

'font-family：jsr'から問題が発生することが予想されます。これは定義されておらず、おそらく' font-family： "jsr" '... –

[OK]を、ので、私は今、恥で死ぬことをゴングしています。私はブラウザで正しいファイルを開くことができませんでした。だから、私はちょうどそこになかった問題について45分執念した。今は何を言うべきか分からない。

出典

2016-10-24 17:08:48 Julian

実際、問題は、ドキュメント内の通常のCSSの下でメディアクエリを配置しなければならないということでした。 – Julian

シンプルなコードはPenで動作しますが、エディタでは動作しません

答えて

関連する問題