Q&A
コードはコードブロックにて、記載してください。
```言語名
ここにソースコード
```
の形式です。
何点か。
並列化とは、横に並べたい、ということですか？
.menu li要素を横に並べたい、ということですか？
###<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
bodyタグが変なところにありますよ？
横に並べたいということです
.menu li要素を横に並べたいのですけどうまくできません
Lhankor_Mhyさんの言う通りなので、
質問のコードと、実コードが同じかどうかも含めて確認してください。
もし実コードがそれなら、HTMLの文法違反なので、
そこも勉強してください。
回答2件
0
css
1.menu{ 2 list-style: none;/*黒丸の排除*/ 3 4 } 5 ^ここに全角スペースがあるのが原因かと。
投稿2020/06/11 03:04
総合スコア36960
0
ベストアンサー
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
総合スコア9555
うまくいきました。display: inlineやdisplay: inline-いきました。display: inlineやdisplay: inline-blockなどためしてできなかったのでたすかりましたありがとうございます！！
あなたの回答
tips
プレビュー
