いつもお世話になっております。
質問は表題の通りです。
親要素のheader_innerにfloat:leftをかけたのですが、子要素が横並びになりません。
原因は何でしょうか?
下記コードです。
html
1<!DOCTYPE html> 2<html lang="en" dir="ltr"> 3<head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" type="text/css" href="css/common.css"> 6</head> 7<body> 8 9 10 <div id="header"> 11 12 <div class="header_top_bar"> 13 <p>##################</p> 14 </div><!-- header_top_bar閉じタグ --> 15 16 17 <div class="header_inner"> 18 <div class="pointmessage"> 19pointo 20 </div> 21 22 <div class="logo"> 23logo 24 </div> 25 26 27 <div class="customer_serch"> 28serch 29 </div> 30 31 </div><!-- header_inner閉じタグ --> 32 33 34 35 </div><!-- header閉じタグ --> 36 37</body> 38</html> 39
css
1@charset "UTF-8"; 2/*---Reset---*/ 3body, h1, h2, h3, h4, h5, h6, p, address, 4ul, ol, li, dl, dt, dd, img, form, table, tr, th, td { 5 margin: 0; 6 padding: 0; 7 border: none; 8 font-style: normal; 9 font-weight: normal; 10 font-size: 100%; 11 list-style-type: none; 12 border-collapse: collapse; } 13 14* { 15 border: 1px solid blue; } 16 17body { 18 margin: 0; 19 color: #333333; 20 text-align: center; 21 font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; 22 font-size: 14px; 23 line-height: 1.714; 24 background: #FFF; 25 width: 100%; } 26 27#header { 28 width: 100%; 29 margin: 0 auto; } 30 #header .header_top_bar { 31 background-color: #e4f2fa; } 32 #header .header_top_bar p { 33 color: #244a61; 34 text-align: center; 35 font-weight: bold; } 36 #header .header_inner { 37 width: 100%; 38 margin: 0 auto; 39 float: left; } 40 #header .header_inner .pointmessage { 41 width: 30%; } 42 #header .header_inner .logo { 43 width: 30%; } 44 #header .header_inner .customer_serch { 45 width: 30%; } 46 47/*# sourceMappingURL=common.css.map */ 48
その他必要情報があれば追記いたしますのでおっしゃてください。
よろしくお願いします。
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/02 06:11
2018/07/02 06:14
2018/07/02 06:27 編集
2018/07/02 06:29