li要素の横並びができない。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5    <link rel="stylesheet" href="css/styles.css">
6      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
7        <title>模写制作１回目</title>
8</head>
9  <body>
10    <div class="header">
11      <div class="header-left">
12        <div class="header-logo">
13            <input type="search" class="header-logo-a" name="submit" value="検索" >
14          </div><!--header-logo-->
15              <div class="header-right">
16                <ul class="header-top">
17                  <li><a href="#" class="header-top-btn">ログインする</a></li>
18                  <li><a href="#" class="header-top-btn">登録する</a></li>
19                  <li><a href="#" class="header-top-btn">ヘルプ</a></li>
20                  <li><a href="#" class="header-top-btn">ホストをはじめる</a></li>
21                </ul> <!--header-top-->
22              </div> <!--header-right-->
23            </div>  <!--header-left -->
24          </div> <!--header-->
25<div class="main">
26  <div class="container">
27    <div class="container-center">
28      <img src="img/1.jpg">
29        <div class="container-font">
30          <h1>旅を贈ろう。</h1>
31          <p>Airbnbギフトカードで、世界をぐんと身近に</p>
32          <a href="#">ギフトカードを登録</a>
33        </div> <!--content-font-->
34      </div><!--container-center-->
35    </div><!--container-->
36      <div class="container-bottom">
37        <h1>いつも完璧な贈り物</h1>
38          <ul class="icon">
39           <li><i class="far fa-envelope  fa-3x"></i></li>
40            <h2>簡単に使える</h2>
41            <p>ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p>
42          </ul>
43          <ul class="icon">
44           <li> <i class="fas fa-stopwatch  fa-3x"></i></li>
45            <h2>有効期限なし</h2>
46            <p>Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p>
47           </ul>
48           <ul class="icon">
49            <li> <i class="fas fa-globe  fa-3x"></i></li>
50             <h2>忘れられない旅</h2>
51             <p>お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p>
52            </ul><!--icon-->
53            </div> <!--container-bottom-->
54<div class="boottom">
55  <div class="bottom-center">
56  <img src="https://a0.muscache.com/airbnb/gift_credit_v2/Home Page/Present Icon/Present Icon.png" alt="">
57  <h2>ギフトカードをもらったら、、、</h2>
58    <p>ログインあるいは利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。</p>
59    <div class="bottom-center-btn">
60        <a href="#" class="bottom-logo">ギフトカードを登録する</a>
61        </div>
62        <div class="bottom-center-btn-b">
63          <a href="#">Airbnbギフトカードの仕組みは？</a>
64          </div>
65          </div>
66        </div><!--bootom-->
67<div class="footer">
68  <div class="footer-center">
69    <ul class="footer-logo">
70      <h1>Airbnb</h1>
71        <li><a href="#">採用情報</a></li>
72        <li><a href="#">プレス</a></li>
73        <li><a href="#">ポリシー</a></li>
74        <li><a href="#">ヘルプ</a></li>
75        <li><a href="#">ダイバーシティ&ビロンギング</a></li>
76        <li><a href="#">アクセシビリティ対応</a></li>
77        <li><a href="#">企業情報</a></li>
78      </ul>
79    <ul class="footer-logo">
80      <h1>スタッフのおすすめ</h1>
81      <li><a href="#">信頼&安全</a></li>
82      <li><a href="#">お友達紹介</a></li>
83      <li><a href="#">Airbnb Citizen</a></li>
84      <li><a href="#">出張</a></li>
85      <li><a href="#">ガイドブック</a></li>
86      <li><a href="#">Airbnbmag</a></li>
87    </ul>
88    <ul class="footer-logo">
89      <h1>ホスティング</h1>
90      <li><a href="#">ホストになる理由</a></li>
91      <li><a href="#">おもてなしの心</a></li>
92      <li><a href="#">ホストの責任</a></li>
93      <li><a href="#">コミュニティセンター</a></li>
94      <li><a href="#">体験を掲載</a></li>
95      <li><a href="#">オープンホーム</a></li>
96    </ul>
97    <ul class="footer-logo">
98    <i class="fab fa-facebook-f fa-lg"></i>
99    <i class="fab fa-twitter fa-lg"></i>
100    <i class="fab fa-instagram fa-lg"></i>
101    <li><a href="#">利用規約</a></li>
102    <li><a href="#">プライバシー</a></li>
103    <li><a href="#">サイトマップ</a></li>
104  </ul>
105  </div>
106
107<div class="footer-foot">
108  <div class="footer-foot-a">
109    <div class="footer-foot-b">
110      <a href="#">Airbnb Global Services Limited<br>
111      観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)<br>
112      © 2019 Airbnb, Inc. All rights reserved.</a>
113       <div class="footer-foot-c">
114        <a href="#" class="footer-logo-b">日本語</a>
115        <a href="#" class="footer-logo-b">JPY-¥</a>
116       </div><!--footer-bottom-b-->
117     </div><!--footer-foot-b-->
118     </div><!--footer-foot-a-->
119    </div><!--footer-foot-->
120   </div><!--footer-->
121  </div>
122 </div><!--main-->
123</div>
124</body>
125</html>
126

CSS
1html, body {
2  height: 100%;
3}
4input[type="search"] {
5  -webkit-appearance:none;
6}
7header {
8  margin-left: 0;
9  margin-right: 0;
10}
11.header-left {
12  height: 100%;
13}
14.header-top li {
15  padding: 10px 10px;
16  list-style: none;
17  margin:auto;
18  float:right;
19}
20.header-top a {
21  color: rgb(72, 72, 72);
22  text-decoration: none;
23}
24.header-logo {
25  height: 100%;
26}
27.header-logo-a {
28  width: 470px;
29  height:40px ;
30}
31.header-right a {
32  color: inherit;
33}
34
35.conteiner {
36  width: 983px;
37  height: 680px;
38}
39.container-center img {
40  width: 100%;
41  height: 600px;
42}
43.container-font {
44  position: absolute;
45  color: rgb(255, 255, 255);
46  top: 25%;
47  left: 20%;
48}
49.container-font h1 {
50  font-size: 46px;
51}
52.container-bottom {
53  width: 1032px;
54  height: 240px;
55  padding: 48px 260px
56}
57.container-bottom h1 {
58  color: rgb(72, 72, 72);
59  text-align: center;
60  margin: 0;
61}
62.icon h2 {
63  font-size: 18px;
64}
65.container-font a {
66  color: rgb(72, 72, 72);
67  width: 144px;
68  font-size: 16px;
69  text-decoration:none;
70  font-weight:bold;
71  border:1px solid #333;
72  background-color:white;
73  padding:8px 0 10px;
74}
75.container-bottom li {
76  float: left;
77}
78.cotainer-bottom-btn h2 {
79font-size: 18px;
80}
81.cotainer-bottom-btn p {
82font-size: 16px;
83}
84.cotainer-bottom-btn li {
85list-style: none;
86}
87.cotainer-footer-btn {
88      margin-top: 18px;
89      text-align: center;
90      width: 33.33333%;
91      float: left;
92    }
93.bottom-center {
94  height: 440px;
95   background-color: #007a87;
96   font-weight:bold;
97   color: rgb(255, 255, 255);
98   text-align: center;
99}
100.bottom-center p {
101  font-size: 20px;
102  margin-bottom: 48px;
103  font-weight: normal;
104  color: rgb(255, 255, 255);
105}
106
107.bottom-center-btn a {
108  color: white;
109  width: 144px;
110  font-size: 16px;
111  text-decoration:none;
112  font-weight:bold;
113  border:1px solid #333;
114  background-color: rgb(255, 90, 95);
115  padding:8px 0 10px;
116  font-weight: normal;
117}
118.bottom-center-btn-b {
119  margin-top: 18px;
120}
121.bottom-center-btn-b a {
122  color: #fff;
123  opacity: 0.6;
124  text-decoration: none;
125  font-size: 18px;
126}
127.footer {
128  width: 994px;
129  height: 313px;
130  padding-top: 48px;
131  padding-bottom: 48px;
132  padding-left: 24px;
133  padding-right: 24px;
134  margin: 0 auto;
135}
136.footer-logo {
137  float: left;
138  width: 158px;
139  height: 221px;
140}
141.footer-logo li {
142  list-style: none;
143  font-size: 14px;
144  /* margin-left: 80px; */
145}
146.footer-logo ul {
147  padding: 0px;
148}
149.footer-logo a {
150  text-decoration: none;
151  color: rgb(72, 72, 72);
152}
153
154.footer-logo h1 {
155  font-size: 14px;
156}
157.footer-center-sita a {
158  color: rgb(72, 72, 72);
159}
160.footer-center-sita h1 {
161  font-size: 14px;
162}
163.footer-foot {
164  float: left;
165}
166.footer-foot-b p {
167 color: rgb(118, 118, 118);
168 /* text-align: center; */
169 }
170 .fa-facebook-f {
171   color: rgb(118, 118, 118);
172 }
173 .fa-twitter {
174   color: rgb(118, 118, 118);
175 }
176.fa-instagram {
177  color: rgb(118, 118, 118);
178}
179.footer-foot-b a {
180  text-decoration: none;
181  color: rgb(72, 72, 72);
182  font-size: 14px;
183  float: left;
184}
185.footer-foot-c a {
186  text-decoration: none;
187  color: rgb(72, 72, 72);
188  float:right;
189}
190 .footer-logo ul {
191  padding-inline-start:0;
192}
193

見本の写真のようにli要素を横並びにしたいのですがどうしてもできません。

display: inline-block;を使って横並びになるかどうか対応したり

display flex
justify-content: space-evenly;を使って横並びにしてからwidthで要素のサイズ変更したがアイコンも一緒に横並びになりダメでした、

widthを使ってぴったり横並びになるか試したりしましたがサイズが合わず真ん中にいかなく、
他にも調べたりしましたがどうしてもできなくわからないので簡単な事かと思いますが是非よければお手伝いの方よろしくお願いします。

yoshinavi

2019/06/30 02:33

参考サイトがあるのであれば、該当箇所がどのようなCSSなのか、デベロッパーツール等で確認してみてください。

shinpachi

2019/06/30 15:25

参考先はbootstrapなど使っており調べましたがそれでもどうしてもわかりませんでした。下記の参考を元に今は学習させていただいております。今回はヒントをくださりありがとうございました！！またよろしければよろしくお願いします＾＾

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

回答2件

ベストアンサー

今のhtmlではul要素が別になってしまっているため、３つの要素がリストとして認識されていないのが原因かと思われます。

横並びにしたい要素をすべてli要素で囲んで一つのul要素に入れてあげて下さい。

html
1    <div class="container-bottom">
2        <h1>いつも完璧な贈り物</h1>
3        <ul class="list-items">
4            <li>
5                <i class="icon far fa-envelope  fa-3x"></i>
6                <h2>簡単に使える</h2>
7                <p>ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p>
8            </li>
9
10            <li>
11                <i class="icon fas fa-stopwatch  fa-3x"></i>
12                <h2>有効期限なし</h2>
13                <p>Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p>
14            </li>
15
16            <li>
17                <i class="icon fas fa-globe  fa-3x"></i>
18                <h2>忘れられない旅</h2>
19                <p>お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p>
20            </li>
21        </ul>
22        <!--icon-->
23    </div>
24    <!--container-bottom-->

横並びにしたい要素にdisplay: inline-block;を指定します。
li要素の横幅は調節してください。

css
1.list-items li {
2    display: inline-block;
3    width: 20vw;
4}

投稿2019/06/30 06:55

編集2019/06/30 07:13

tepidmilktea

総合スコア57

shinpachi

2019/06/30 15:51

参考にさせていただいとところ無事真ん中に寄りました！本当にありがとうございます！！！１日以上かかっても出来なかったですが解決出来てよかったです＾＾独学でやっていてこちらのサービスを使わせていただく機会がこれからもあると思いますのでその時は是非ともよろしくお願いします！！この度は本当にありがとうございました＾＾