前提・実現したいこと
html,cssの練習中です。divタグにhea> 引用テキストder-listというclassをつけ、その中にリストを入れました。画面の横幅が1000px以下の時に表示が消える(display:none;)ようにしたいです。
発生している問題・エラーメッセージ
divタグにheader-listというclassをつけ、その中にリストを入れました。画面の横幅が1000px以下の時に表示が消えるようにしたかったのですがうまく消えませんでした。
エラーメッセージ
該当のソースコード
ソースコード ``` .header-list{ background-color:green;height:inherit;display:inline-block;float:right;width:31%; } .header-list ul{ display:table;height:inherit; } .header-list li{ list-style:none; font-size:13px; padding-top:30px; padding-right:5px; display:table-cell; height:inherit; font-style:italic; height:80px; } .header-list button{ border:none; background-color:white; } @media screen and(max-width:1000px){ .header-list{ display:none!important; } } <div class="header-list" id="header-list"> <ul class="ulist1"style=""> <li> <div style=""> <button type="button" name="button"> <div class=""> ホストを始める </div> </button> </div> </li> <li> <div style=""> <button type="button" name="button"> <div class=""> ヘルプ </div> </button> </div> </li> <li> <div style=""> <button type="button" name="button"> <div class=""> 登録する </div> </button> </div> </li> <li> <div style=""> <button type="button" name="button"> <div class=""> ログイン </div> </button> </div> </li> </ul> </div> ### 試したこと ネットで色々検索。 元の表示をnoneにし、@media screen and(min-width:1000px){ .header-list{display:block;} }のようにしてもうまく動作せず。 IDや!importantをつけても動作せず。 ### 補足情報(FW/ツールのバージョンなど) bootstrapが反映されるようになっています。 ここにより詳細な情報を記載してください。
(質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
回答2件
あなたの回答
tips
プレビュー