HTML&CSS コード ```### 前提・実現したいこと 横並びにしたいのですが、 display: flex;にしているのにflexが効かなかったり、項目が縦になったりします。 ### 発生している問題・エラーメッセージ ![イメージ説明](356ca4e0e88576da5c29e880bb510bd1.png) ``` エラーメッセージ!! 項目が横並びにならないのと文字が縦になってしまいます! 下の画像のようにflexを使って横並びにしたいです。 ```![イメージ説明](d29e6ac2022f73d2e2c985c985afd15b.png) ``` ### 試したこと div classを増やしてみたりulにclassを持たせてみたが駄目でした。 色々自分でも調べましたが行き詰まってしまいました。 ```ここに言語を入力 コード html ``` <!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="favicon" href="img/437460254_fav.ico"> <title>現地の人から借りる家、体験&スポット - Airbnb</title> </head> <body> <header> <div class="header"> <div class="header-left"> <img class="logo" src="img/airbnb-icon-18.jpg"class="fas fa-search" width="30px" height="30px"> <!-- <form class="fas fa-search" action="#" method="get"> --> <input type="search" type="text" placeholder="探す"> <!-- </form> --> </div> <div class="header-right"> <a class="host" href="#">ホストを始める</a> <a class="help" href="#">ヘルプ</a> <a class="register" href="#">登録する</a> <a class="login" href="#">ログイン</a> </div> <!-- <div class="alert alert-info text-center mb-0 rounded-0 alert-dismissible" fade show> <button type="button" class="close" deta-dismiss="alert" aria-label="閉じる"> <span aria-hidden="true">×</span> </button> <i class="far fa-comment-dots fa-lightgreen"></i> 今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。 </div> </div> --> </header> <div class="main"> <div class="alert alert-info text-center mb-0 rounded-0 alert-dismissible" fade show> <button type="button" class="close" deta-dismiss="alert" aria-label="閉じる"> <span aria-hidden="true">×</span> </button> <i class="far fa-comment-dots fa-lightgreen"></i> 今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。 </div> <div class="container"> <div class="text"> <h1>旅を送ろう。</h1> <p>Airbnbギフトカードで、世界をぐんと身近に</p> <button class="btn btn-light">ギフトカードを登録</button> </div> </div> </div> <!-- </div> --> <div class="contents"> <div class="container"> <h1>いつも完璧な贈り物</h1> <div class="boxs"> <div class="box"> <i class="far fa-envelope fa-3x fa-green"></i> <h5>簡単に使える</h5> <p>ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p> </div> <div class="box"> <i class="fas fa-stopwatch fa-3x"></i> <h5>有効期限なし</h5> <p>Airbnbのギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p> </div> <div class="box"> <i class="fas fa-globe-africa fa-3x"></i> <h5>忘れられない旅</h5> <p>お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p> </div> </div> </div> </div> <div class="content-wrapper"> <div class="container"> <div class="title"> <img src="https://a0.muscache.com/airbnb/gift_credit_v2/Home Page/Present Icon/Present Icon.png"> <h1>ギフトカードをもらったら...</h1> <p>ログインあるいは利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。</p> <div class="btn-wrapper"> <a href="#" class="btn2" >ギフトカードを登録する</a> <br> <a href="#" class="btn3">Airbnbギフトカードの仕組みは?</a> </div> </div> </div> </div> </div> <footer> <div class="contact"> <div class="container"> <div class="contacter"> <div class="contact-form"> <h4>Airbnb</h4> <div class="contact-list"> <ul class="contact-lister"> <li><a href="#">採用情報</a></li> <li><a href="#">プレス</a></li> <li><a href="#">ポリシー</a></li> <li><a href="#">ヘルプ</a></li> <li><a href="#">ダイバーシティ&ビロンギング</a></li> <li><a href="#">企業情報</a></li> </ul> </div> </div> </div> <div class="contacter"> <div class="contact-form"> <h4>スタッフオススメ</h4> <div class="contact-list"> <ul class="contact-lister"> <li><a href="#">信頼&安全</a></li> <li><a href="#">お友達紹介クーポン</a></li> <li><a href="#">Airbnb Citizen</a></li> <li><a href="#">出張</a></li> <li><a href="#">ガイドブック</a></li> <li><a href="#">Airbnbmag</a></li> <li><a href="#">イベント</a></li> </ul> </div> </div> </div> <div class="contacter"> <div class="contact-form"> <h4>ホスティング</h4> <div class="contact-list"> <ul class="contact-lister"> <li><a href="#">ホストになる理由</a></li> <li><a href="#">おもてなしの心</a></li> <li><a href="#">ホストの責任</a></li> <li><a href="#">コミュニティセンター</a></li> <li><a href="#">体験を掲載</a></li> <li><a href="#">オープンホーム</a></li> </ul> </div> </div> </div> <div class="contacter"> <div class="contact-form"> <div class="contact-list"> <a href="#" class="fab fa-facebook-f"></a> <a href="#" class="fab fa-twitter"></a> <a href="#" class="fas fa-camera-retro"></a> <ul class="contact-lister"> <li><a href="#">利用規約</a></li> <li><a href="#">プライバシー</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div> </div> </div> <a href="#" >Airbnb Global Services Limited 観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)</a> <p>© 2019 Airbnb, Inc. All rights reserved.</p> <a href="#">日本語</a> <a href="#">JPY-¥</a> </div> </div> </footer> <!-- <img src="img/BackgroundHomeSummer.jpg" alt="写真" width="1920" height="650"> --> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html> ```ここに言語を入力 コード css ```html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, div { margin: 0; padding: 0; } html { font-family: sans-serif; } header { height: 80px; } a { text-decoration: none; } /* header-left */ .logo { margin-right: 25px; } .header-left { float: left; line-height: 80px; margin-left: 25px; } .header-left input { width: 460px; height: 48px; /* color: #eee; */ border-radius: 5px; /* background-image: "fas fa-search"; */ } /* header-right */ .header-right { line-height: 80px; display: flex; justify-content: flex-end; text-align: left; } .header-right a { font-size: 15px; color:#696969; font-weight: bolder; padding: 0 20px; } .alert { height:50px; color: black; } .main { background: url(../img/BackgroundHomeSummer.jpg); background-size: cover; height: 650px; position: relative; } .container { width: 1100px; margin: 0 auto; /* padding: 300px 0; */ /* position: absolute; */ } .text { position: absolute; color: white; top: 42%; font-weight: normal; } .contents { text-align: center; } .text p { margin-top: 20px; } .text button { margin-top:32px; padding: 10px 20px; } .contents h1 { font-size: 30px; } .box h5 { font-weight: bold; } .box p { font-size: 16px; margin-top: 24px; color: #767676; width: 80%; display: inline-block; } .boxs { display: flex; } .box { margin-top: 30px; width: 33%; } .contents { padding: 48px 0; } .far { margin-bottom: 25px; } .fas { margin-bottom: 25px; } .content-wrapper { padding: 48px 0; background: #007a87; text-align: center; padding: 48px 0: } .title { color: white; } .title h1 { margin-top: 20px; font-weight: bold; font-size: 30px; } .title p { font-size: 21px; } .btn2 { display: inline-block; margin: 20px 0 15px 0;; color: white; padding: 8px 24px; background-color: #ff5a5f; border-radius: 4px; font-weight: bold; } .btn3 { display: inline-block; color: white; opacity: 0.6; font-size: 15px; } .btn2:hover { text-decoration: none; color: white; opacity: 0.9; } .btn3:hover { text-decoration: none; color: white; opacity: 1; } .contact { margin-top: 25px; } li { list-style: none; } .contact-lister { display: flex; justify-content: space-between; } .contact-list { margin-top: 25px; width: 25%; } .contact h4 { font-size: 15px; font-weight: bold; opacity: 0.9; } .contact-list a { color:#767676; font-size: 14px; font-weight: bold; } ``` ### 補足情報(FW/ツールのバージョンなど) エディタはATOMを使用してます!
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/17 12:23