<li>inlineで並列化できないです

###<li＞のリストをdisplay: inlineで並列化したいのですができません。。。

htmlでHPを作ろうとしているのですが
並列化がうまくいきません教えていただけないでしょうか。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title></title>
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <meta name="description" content="株式会社のホームページです。">
8    <meta name="keywords" content="">
9    <link rel="stylesheet" href="css/header.css">
10
11    <header class="header">
12        <h1 class="site-logo"><img src="image/logo.jpg" alt="LOGO"></h1>
13
14            <ul class="menu">
15                <li class="list"><a href="">About</a></li>
16                <li class="list"><a href="">Works</a></li>
17                <li class="list"><a href="">Recruit</a></li>
18                <li class="list"><a href="">News</a></li>
19                <li class="list"><a href="">Contact</a></li>
20            </ul>
21
22    </header>
23    <div class="header-img"><img src="image/header.jpg" alt="header"></div>
24    <div class="content">
25       
26    </div>
27    <footer class="site-footer">
28        <p class="copyright">@</p>
29    </footer>
30
31
32  </head>
33  <body>
34
35  </body>
36</html>
37

該当のソースコード

css
1
2/* html,bodyタグの設定 */
3html, body{
4    margin: 0;         /* 余白の削除 */
5    padding: 0;        /* 余白の削除 */
6    width:100%;
7    height:100%;
8          }
9
10
11
12.header{
13    position: fixed;            /* ヘッダーの固定 */
14    top: 0px;                   /* 位置(上0px) */
15    left: 0px;                  /* 位置(右0px) */
16    width: 100%;                /* 横幅100%　*/
17    height: 140px;              /* 縦幅140px */
18      }
19
20
21
22.menu{
23    list-style: none;/*黒丸の排除*/
24
25     }　　
26.list ul li{
27   display: inline-flex; /*並列化*/
28

miyabi_pudding

2020/06/11 02:53 編集

コードはコードブロックにて、記載してください。 ```言語名ここにソースコード ``` の形式です。何点か。並列化とは、横に並べたい、ということですか？ .menu li要素を横に並べたい、ということですか？

Lhankor_Mhy

2020/06/11 02:56

bodyタグが変なところにありますよ？

tsuyoshin

2020/06/11 02:57 編集

横に並べたいということです .menu　li要素を横に並べたいのですけどうまくできません

miyabi_pudding

2020/06/11 03:02

Lhankor_Mhyさんの言う通りなので、質問のコードと、実コードが同じかどうかも含めて確認してください。もし実コードがそれなら、HTMLの文法違反なので、そこも勉強してください。

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

回答2件

css
1.menu{
2    list-style: none;/*黒丸の排除*/
3
4     }　　
5      ^ここに全角スペースがあるのが原因かと。

投稿2020/06/11 03:04

Lhankor_Mhy

総合スコア36142

ベストアンサー

display: flex;もしくは、display: inline-flex;は、flexアイテムの親要素に効かせるものです。
よって、下記になります。

css
1.menu{
2  list-style: none;/*黒丸の排除*/
3  display: inline-flex; /* 子要素をflexアイテム化する */
4}

ただし、inline-flexは、flexの親であるかつ inline要素にするという値のため、
.menuをインライン要素にしたい、などなければ、display: flex;の方が適当でしょう。

投稿2020/06/11 02:59

miyabi_pudding

総合スコア9528

tsuyoshin

2020/06/11 03:39

うまくいきました。display: inlineやdisplay: inline-いきました。display: inlineやdisplay: inline-blockなどためしてできなかったのでたすかりましたありがとうございます！！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.47%

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

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

質問する

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

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