ヘッダーのmenuの横並びの仕方がわからないです。

画像のように"ホーム、自己紹介、作品、お問い合せ"　を横並びにしたのですが、いくら試してもやり方がわかりません。教えてください。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="UTF-8">
4<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6<meta name="format-detection" content="telephone=no">
7<link rel="stylesheet" href="./css/reset.css">
8<link rel="stylesheet" href="./css/style.css">
9<title></title>
10<head></head>
11<body>
12  <div class="p-all">
13  <div class="l-center">
14    <!-- headerここから -->
15    <header class="l-header u-clearfix">
16      <!-- .c-header__inner- - left -->
17     <div class="c-header_logo">
18       <img src="./img/logo.jpg"  alt="logo">
19     </div>
20    <!-- .c-header__inner- -right -->
21      <ul class="c-header_menu u-clearfix">
22          <li><a href="#">ホーム</a></li>
23          <li><a href="#">自己紹介</a></li>
24          <li><a href="#">作品</a></li>
25          <li><a href="#">お問い合わせ</a></li>
26      </ul>
27    </header>
28    <!-- container -->
29    <div class="l-container">
30      <!-- .p-container__hero -->
31      <div class="p-container__hero">
32        <div class="p-container__hero--picture"><img src="./img/hero.jpg" aria-flow></div>
33        <div class="p-container__shadow--picture"><img src="./img/shadow.jpg"></div>
34        <h1 align=center>世界中を旅するフォトグラファーです。</h1>
35      </div>
36      <!-- .l-contents -->
37      <div class="p-contents u-clearfix">
38        <!-- .p-contentLeft -->
39        <div class="p-content__photo">
40          <h2 class="p-content__inner--photoTitle"><span>|</span>最新の作品</h2>
41          <ul class="p-content__inner--photo">
42              <li><img src="./img/thumb1.jpg" alt="thumb1"></li>
43              <li><img src="./img/thumb2.jpg" alt="thumb2"></li>
44              <li><img src="./img/thumb3.jpg" alt="thumb3"></li>
45              <li><img src="./img/thumb4.jpg" alt="thumb4"></li>
46              <li><img src="./img/thumb5.jpg" alt="thumb5"></li>
47              <li><img src="./img/thumb6.jpg" alt="thumb6"></li>
48            </ul>
49          </div>
50           <!-- p-content2 -->
51        <div class="p-content__profile">
52          <h2 class="p-content__inner--profileTitle"><span>|</span>自己紹介</h2>
53          <p class="p-content__inner--profile">
54            こんにちは、Manaです。世界中を
55            旅しながら写真を撮っています。
56            <a href="https://twitter.com/login?lang=ja">Twitter</a>や<a href="https://twitter.com/login?lang=ja">Facebook</a>
57            やってます。
58            お気軽にフォローしてください！
59            <a href="https://twitter.com/login?lang=ja">ブログ</a>もチェックしてみてくださ
60            い。これはデモサイトです。実際
61            は写真苦手です。はい。
62            こんにちは、Manaです。世界中を
63            旅しながら写真を撮っています。
64            <a href="https://twitter.com/login?lang=ja">Twitter</a>や<a href="https://twitter.com/login?lang=ja">Facebook</a>やってます。
65            お気軽にフォローしてください！
66            <a href="https://twitter.com/login?lang=ja">ブログ</a>もチェックしてみてくださ
67            い。これはデモサイトです。実際
68            は写真苦手です。はい。
69          </p>
70        </div>
71        </div>
72        </div>
73      </div>
74      <footer class="l-footer">
75        <img src="./img/スクリーンショット 2019-10-03 21.31.07.jpg" alt="footer">
76      </footer>
77    </div>
78</body>
79</html>

CSS
1.p-all{
2  background: #EEE4CA  url(../img/bg.jpg) repeat-x;
3}
4
5.l-center{
6  margin:0  auto;
7  width: 960px;
8}
9
10.clearfix::after {
11  content : " ";
12  display : block;
13  clear : both;
14}
15
16.l-header{
17  padding-top: 50px;
18}
19
20.c-header_logo{
21  float: left;
22}
23
24.c-header__menu {
25  float: right;
26  padding-top: 50px;
27  font-size: 0;
28  width: 660px;
29}
30
31.c-header__menu li {
32  display: inline-block;
33  margin-right: 35px;
34}
35
36.c-header__menu > a {
37  color: #666666;
38  font-size: 15px;
39  float: right;
40  text-decoration: none;
41}
42
43.c-header__menu li:last-child {
44  margin-right: 0;
45}
46
47.l-container {
48  margin: 40px 0px;
49}
50
51.p-container__hero--picture {
52  border: 5px #FFFFFF solid;;
53}
54
55.p-container__hero h1{
56  color: 	#5B616A;
57  font-size: 25px;
58  width: 100%;
59  margin: 0 auto;
60}
61
62.p-contents{
63  display: flex;
64  margin-top: 30px;
65}
66
67.p-content__photo{
68  width: 700px;
69}
70
71.p-content__inner--photoTitle{
72  color: 	#5B616A;
73  font-size: 20px;
74  margin-bottom: 15px;
75}
76
77span{
78  color: #FF0000;
79  font-weight: bold;
80}
81
82.p-content__profile{
83  color: 	#5B616A;
84  padding-left: 30px;
85  width: 240px;
86}
87
88.p-content__inner--profileTitle{
89  margin: 0 0 20px;
90  padding-left: 10px;
91  color: #666666;
92  font-size: 20px;
93}
94
95.p-content__inner--profile {
96  color: #666666;
97  font-size: 16px;
98  line-height: 21px;
99}
100
101.p-content__inner--photo{
102  display: flex;
103  margin-top: 20px;
104  flex-wrap: wrap;
105  justify-content: space-between;
106}
107
108.p-content__inner--photo > li{
109  width: 210px;
110 height: 140px;
111 margin: 0 20px 20px 0;
112 border: 5px solid #ffffff;
113 box-sizing: border-box;
114}
115
116.l-footer img{
117  display: block;
118  margin:  auto;
119}

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

回答2件

css
1header{
2    display: flex;
3    justify-content: space-between;
4    
5}

これでできませんか？
flexでdivとulを横並びにしてjustify-content: space-between;で両端に配置っていう指定です

投稿2019/10/20 04:56

pikurusudakedo

総合スコア59

liタグにcssでfloat:leftを当ててみてください

投稿2019/10/19 06:08

Diwamoto

総合スコア57

あなたの回答

tips

プレビュー

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

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

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

ヘッダーのmenuの横並びの仕方がわからないです。

関連した質問