display:flex;が反映されません。。

こんな感じです、bodyのredは反映されているのですが．．
これでしばらく悩んでいます。
よければ指摘お願いします！

<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>practice</title> <link rel="stylesheet" href="../CSS/masablog.css"> </head> <body> <header> <h1>Masablog</h1> <div class="container-1"> <ul> <li class="item">依頼</li> <li class="item">相談</li> <li class="item">その他</li> </ul> </div> </header> </body> </html>

CSS

@charset "UTF-8";
.container-1　ul {
display: flex;
}
body{
color: red;
}

kei344

2020/04/07 17:14

（質問文は編集できます）コードはスクリーンショットでなくコードブロックにテキストでお書きください。

Masakun_exe

2020/04/08 05:07

指摘ありがとうございます！他の回答者の方の指摘も受け入れさせていただいたのですが、どうでしょうか。。まだできません。。

kei344

2020/04/08 05:09

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「追記したこと」がわかるようにしてください。後から見た人から見て、現在の回答が「無いコードに対しての指摘」になり、意味がわからなくなります。

Masakun_exe

2020/04/08 06:24

わかりました！以後気をつけます！長文に渡り指摘ありがとうございます！勉強になります「！！

kei344

2020/04/08 07:04

ここは「質問への追記・修正の依頼」です。解決済にしても本文を編集することが出来ますので、よろしくお願いします。また、まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

行動規範の内容に同意します

回答2件

ベストアンサー

kei344さんの回答に付け加えて、
たぶんli要素を横並びにしたいのだと思いますが、もしそうなら、

.container-1 ul {

flexは子要素のみに有効です。

投稿2020/04/07 18:39

hatena19

総合スコア34075

Masakun_exe

2020/04/08 05:08

編集してみましたができません、お手数ですがよければ問題解決にもう少し手を貸してほしいです！そして、指摘ありがとうございます！

hatena19

2020/04/08 05:42

.container-1　ul { 上記の ul の前が全角空白になってますので、それを半角空白に修正してください。

Masakun_exe

2020/04/08 05:49

ほんとだ！！！こんな小さいことで悩んでいました。。まだまだ未熟ですね、ほんとに丁寧にありがとうございました！

hatena19

2020/04/08 05:53

最初はそんなもんです。 kei344さんの依頼の質問修正はしておいてください。コードをマークダウンのコードブロックに入れる。

行動規範の内容に同意します

末尾の;抜けです。

【@charset - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/@charset

追記：

CSS
1/*           ↓全角空白になっているので半角にしましょう。  */
2.container-1　ul {
3display: flex;
4}
5body{
6color: red;
7}

投稿2020/04/07 17:15

編集2020/04/08 05:10

kei344

総合スコア69606

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

display:flex;が反映されません。。

関連した質問