Q&A
固有名詞出ちゃってますが大丈夫ですか？ 全角スペースに気を付けましょう
前提・実現したいこと
clearfixを用いているのですが、うまくいきません。
おそらく、<div class="four">~</div>が下の分まで囲ってしまっているからだと思います。
ですが、解決方法がわかりません。
該当のソースコード
HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ページのタイトル</title> <link rel="stylesheet" href="css/style.css"> <!--<link rel="stylesheet" href="css/normalize.css">--> </head> <body> <header> <div id="headerMain"> <div id="headerHead"> <img src="" alt="" height="90" width=""> </div> <div id="headerHeadName"> <img src="" alt="" height="" width=""> <p></p> </div> <div id="headerLogin"> <p id="headerLogin1"></p> </div> <div id="headerLogOut"> <p id="headerLogOut1"><br> <span id="headerLogOut2">→<span></p> </div> </div> </header> <main> <div> <p>基本情報</p> </div> <div> <span id="">←<span></p> <span id="">→<span></p> <input type="submit" name="" value="検索画面へ戻る"> <input type="submit" name="" value="登録"> </div> <div class="three"> <div class="three_1"> <p>店舗コード</p> <input type="text" name=""> </div> <div class="three_1"> <p>店舗名</p> <input type="text" name=""> </div> <div class="three_1"> <p>店舗名カナ</p> <input type="text" name=""> </div> </div> <div class="three"> <div class="three_1"> <p>開店状況</p> <input type="text" name=""> </div> <div class="three_1"> <p>開店日</p> <input type="text" name=""> </div> <div class="three_1"> <p>閉店日</p> <input type="text" name=""> </div> </div> <div class="three"> <div class="three_1"> <p>郵便番号</p> <input type="text" name=""> </div> <div class="three_1"> <p>都道府県</p> <input type="text" name=""> </div> <div class="three_1"> <p>住所1</p> <input type="text" name="" placeholder="大阪"> </div> </div> <div class="three"> <div class="three_1"> <p>住所2</p> <input type="text" name=""> </div> <div class="three_1"> <p>エリア</p> <input type="text" name=""> </div> <div class="three_1"> <p>住所1</p> <input type="text" name="" placeholder="大阪"> </div> </div> <div class="three"> <div class="three_1"> <p>電話番号</p> <input type="text" name=""> </div> <div class="three_1"> <p>FAX</p> <input type="text" name=""> </div> <div class="three_1"> <p>携帯番号</p> <input type="text" name=""> </div> </div> <div class="four"> <div class="four_1"> <p>所属</p> <input type="text" name=""> </div> <div class="four_1"> <p>役職</p> <input type="text" name=""> </div> <div class="four_1"> <p>オーナー</p> <input type="text" name=""> </div> <div class="four_1"> <p>オーナーカナ</p> <input type="text" name=""> </div> </div> <div class="four"> <div class="four_1"> <p>店長</p> <input type="text" name=""> </div> <div class="four_1"> <p>店長カナ</p> <input type="text" name=""> </div> <div class="four_1"> <p>店舗担当窓口</p> <input type="text" name=""> </div> <div class="four_1"> <p>店舗窓口カナ</p> <input type="text" name=""> </div> </div> <div> <p>営業時間</p> <input type="text" name=""> <p>定休日</p> <input type="text" name=""> </div> <div> <p>交通アクセス</p> <input type="text" name=""> <p>ジャンル</p> <input type="text" name=""> </div> <div> <p>座席数</p> <input type="text" name=""> <input type="text" name=""> <p>座席有</p> <input type="text" name=""> <p>ファミリー歓迎</p> <input type="text" name=""> <p>喫煙可</p> <input type="text" name=""> <p>分煙</p> <input type="text" name=""> <p>禁煙</p> <input type="text" name=""> </div> <div> <div> <p>メールアドレス</p> <input type="text" name=""> <input type="text" name=""> <p>送付希望</p> </div> <div> <p>携帯アドレス</p> <input type="text" name=""> <input type="text" name=""> <p>送付希望</p> </div> </div> <div> <div> <p>HPアドレス</p> <input type="text" name=""> <input type="text" name=""> <p>冊子掲載</p> </div> <div> <p>Facebook</p> <input type="text" name=""> <input type="text" name=""> <p>冊子掲載</p> </div> </div> <div> <div> <p>Twitter</p> <input type="text" name=""> <input type="text" name=""> <p>送付希望</p> </div> <div> <p>その他</p> <input type="text" name=""> <input type="text" name=""> <p>送付希望</p> </div> </div> <div> <div> <p>食べログ<br> ぐるなび</p> <input type="text" name=""> </div> </div> <div> <p>掲載雑誌</p> <textarea></textarea> </div> <div> <p>掲載内容</p> <textarea></textarea> </div> <div> <p>訪問可能時間帯</p> <input type="text" name=""> <p>訪問可能曜日</p> <input type="text" name=""> </div> <div> <p>調査日</p> <input type="text" name=""> <p>調査担当</p> <input type="text" name=""> </div> <div> <p>調査内容</p> <textarea></textarea> </div> <div> <p>フリーワード</p> <textarea></textarea> </div> <div> <input type="submit" name="btn" value="登録"> </div> </main> <footer> <div id="headerMain"> <div id="headerHead"> <img src="" alt="" height="90" width=""> </div> <div id="headerHeadName"> <img src="" alt="" height="" width=""> <p>店舗管理システム</p> </div> <div id="headerLogin"> <p>Copyright © , ALL rights reserved.</p> </div> </div> </footer> </body> </html>
CSS *{ margin: 0; padding: 0; } body{ background-color: #E9E8E0; width: 1280px; height: 400px; margin: 0 auto; } #pageBody{ padding: 100px 0 100px 0; } #pageMain{ width: 500px; height: 110px; background-color: #C81528; margin: 0 auto; } #pageMain:after{ content: ""; clear: both; display: block; } #pageHead { float: left; margin: 5px 10px 5px 40px; display: table-cell; vertical-align: middle; } #pageHeadName{ float:left; height: 100px; padding-top: 10px; } #pageHeadName img{ position: relative; top: 5px; } #pageHeadName p{ color: #F3E9BB; font-size: 20px; position: relative; top: 5px; } #pageMain2{ width: 500px; height: 290px; background-color: #F7F7F7; margin: 0 auto; text-align: center; } #pageMain2 p{ font-size: 14px; color: #C81528; padding-top: 5px; padding-bottom: 5px; } .btn{ text-decoration: none; color: white; background-color: blue; display: inline-block; height: 50px; width: 170px; line-height: 50px; border-radius: 5px; opacity: 0.7; box-shadow: 0 2px 0 black; margin-top: 10px; } #form{ margin: 0 auto; } .sample1{ height: 50px; width: 380px; border-radius: 25px; border: 1px solid rgba(1,1,1,0.5); margin:10px 60px; background-image: url(../images/loginid_gray.png); background-repeat: no-repeat; background-position: 90% 50%; } input::placeholder{ opacity: 0.6; font-size: 15px; padding-left: 25px; } .sample2{ height: 50px; width: 380px; border-radius: 25px; border: 1px solid rgba(1,1,1,0.5); margin:10px 60px; background-image: url(../images/loginpass_gray.png); background-repeat: no-repeat; background-position: 90% 50%; } #headerMain{ width: 1280px; height: 100px; background-color: #C81528; display: table; } #headerHead { float: left; margin: 5px 10px 5px 40px; display: table-cell; vertical-align: middle; } #headerHeadName{ float:left; height: 100px; padding-top: 10px; } #headerHeadName img{ position: relative; top: 5px; } #headerHeadName p{ color: #F3E9BB; font-size: 20px; position: relative; top: 5px; } #headerLogin { display: table-cell; vertical-align: middle; } #headerLogin1{ color: white; font-size: 10px; float: right; } #headerLogOut { width: 140px; display: table-cell; vertical-align: middle; } #headerLogOut1{ color: white; font-size: 10px; float: right; padding-right: 40px; } #headerLogOut2{ color: white; font-size: 20px; float: right; } .three{ width: 1280px; margin-bottom: 10px; } .three_1{ float: left; width: 33%; } .three_1 input{ width: 270px; height: 30px } .three_1 p{ width: 120px; font-size: 20px; display: inline-block; /*margin-right: 30px;*/ } .three:after{ content: ""; display: block; clear: both; } .four{ width: 1280px; margin-bottom: 10px; } .four:after{ content: ""; display: block; clear: both; } .four_1{ float: left; width: 25%; box-sizing: border-box; } .four_1 input{ width: 160px; height: 30px } .four_1:first-child p { width: 120px; font-size: 20px; display: inline-block; /*margin-right: 30px;*/ } .four_1:nth-child(2) p { width: 100px; font-size: 20px; display: inline-block; /*margin-right: 30px;*/ } .four_1:nth-child(3) p { width: 100px; font-size: 20px; display: inline-block; /*margin-right: 30px;*/ } .four_1:nth-child(4) p { width: 120px; font-size: 20px; display: inline-block; /*margin-right: 30px;*/ }
忠告ありがとうございます。過去のウェブページを真似ているだけなので、おそらく大丈夫かと思って投稿してしまいました。見直したところ、全角スペースが原因でした。ありがとうございました！
忠告ありがとうございます。過去のウェブページを真似ているだけなので、おそらく大丈夫かと思って投稿してしまいました。見直したところ、全角スペースが原因でした。ありがとうございました！
回答1件
0
自己解決
<div class="four">のdivとclassの間に全角スペースが適応されていました。
投稿2018/09/06 06:14
総合スコア17
あなたの回答
tips
プレビュー
