Q&A
すいません…初歩的なミスでした…回答いただきありがとうございました！
前提・実現したいこと
Jqueryで開閉するナビゲーションでレスポンシブデザインにした時に縦に表示したい
発生している問題・エラーメッセージ
ナビゲーションのliが横並びのままになってしまう。
該当のソースコード
ソースコード <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 22.0.1.0 for Windows"> <title>mypage</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/dynamic.css"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="scripts/custom.js"></script> </head> <body> <div class="mainbox"> <header> <div class="logo"> <h1><img src="images/logo.png"alt="Englines"></h1> </div> </header> <!--===========global=============--> <div class="wrapper-nav-global"> <div class="menubtn"><a href="#">MENU</a></div> <ul class ="nav-global clear"> <li><a href="index.html">Home</a></li> <li><a href="sub2.html">コンパクトカー・1BOX</a></li> <li><a href="sub1.html">SUV</a></li> <li><a href="sub3.html">セダン・クーペ</a></li> <li><a href="sub4.html">ハイブリッド</a></li> <li><a href="sub5.html">link</a></li> </ul> </div><!--===========/global=============--> ＣＳＳ .menubtn{ display: none; } .nav-global clear{ height: auto; } .nav-global{ display: block; } .nav-global ul{ margin: 0 auto; padding: 0 3%; max-width:100%; } .nav-global li { float: left; width: 15%; text-align: center; list-style: none; } .nav-global li a { display: block; padding: 30px 0; border-style: solid 3px #ddd; color: #0ff; } .nav-global li a:hover { padding: 30px 0; border-bottom: solid 5px #8ac2d0; } .nav-global li a:active{ border-bottom: solid 5px #75b4c4; } ＣＳＳ @media screen and (max-width:600){ .menubtn{ display: block; } .menubtn a{ display: block; padding: 10px 0; background: #ededed; color: #8ac2d0; font-weight: bold; text-align: center; } .menubtn a:hover{ background: #ddd; } .menubtn a:active{ background: #bbb; } .nav-global li { float: none; max-width: 100%; text-align: left; } .nav-global li a { padding: 10px 0 10px 15px; border-right: none; border-top: solid 1px #dedede; } .nav-global li a:hover { padding: 10px 0 10px 10px; border-bottom: solid 1px #ddd; border-left: solid 5px #8ac2d0; } ### 試したこと width、height等の変更を行ったのですが、一向に直らず詰まってます。 ### 補足情報（FW/ツールのバージョンなど） ここにより詳細な情報を記載してください。
回答2件
0
ベストアンサー
下記を修正（pxが必要）
diff
1- @media screen and (max-width:600){ 2+ @media screen and (max-width:600px){
あと下記も修正。
diff
1 .nav-global li { 2 float: none; 3- max-width: 100%; 4+ width: 100%; 5 text-align: left; 6 }
投稿2020/12/09 12:18
総合スコア34073
0
css
1@media screen and (max-width:600){
これを
css
1@media screen and (max-width: 600px) {
こうすれば治ると思います！
投稿2020/12/09 11:55
総合スコア8
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/09 12:42