フロント周りの初心者です。よろしくお願いいたします。
現在HTMLとCSSでWebページを作成しています。そこでpaddingを指定しているわけでもないのですがdivタグ内の左側に意図しない空白ができてしまっています。
html
1 <div class="store-property"> 2 <div class="property-left"> 3 <a href="https://joyfit.jp/kameido/">亀戸店</a> 4 </div> 5 <div class="property-right"> 6 <p class="store-position">(江東区、亀戸)</p> 7 </div> 8 </div> 9 <div class="store-avaluation"> 10 <div class="avaluation-left"> 11 <ul class="avaluation-star"> 12 <img src="img/star.png"> 13 <img src="img/star.png"> 14 <img src="img/star.png"> 15 <img src="img/star.png"> 16 <img src="img/star-none.png"> 17 </ul> 18 </div> 19 <div class="avaluation-property"> 20 <p><span>4.1</span>[設備 4.7 : 混み具合 3.9 : スタッフ 4.7 : 会員のマナー 3.1]</p> 21 </div> 22 </div>
css
1.store-property { 2 border-bottom: 1px solid #D8D8D8; 3 height: 50px; 4} 5 6.store p { 7 color: gray; 8} 9 10.property-left { 11 float: left; 12} 13 14.property-right { 15 float: left; 16} 17 18.property-left a { 19 color: #7401DF; 20 font-weight: 900; 21 padding-left: 40px; 22 display: block; 23 padding-top: 12px; 24 padding-bottom: 12px; 25 font-size: 20px; 26} 27 28.property-right p { 29 font-size: 13px; 30 color: gray; 31 font-weight: normal; 32 padding-left: 20px; 33 padding-top: 5px; 34} 35 36/* ここまでがstore-propertyのCSS */ 37 38.store-avaluation { 39 border-bottom: 1px solid #D8D8D8; 40 height: 50px; 41 width: 100%; 42} 43 44.avaluation-left { 45 float: left; 46} 47 48.avaluation-property p { 49 padding-left: 10px; 50 font-size: 14px; 51} 52 53.avaluation-property { 54 float: left; 55} 56 57.avaluation-property span { 58 font-size: 18px; 59 color: #7401DF; 60 padding-right: 5px; 61 font-weight: bold; 62}
ページを検証して該当部分にカーソルを合わせたところ親要素のstore-avaluation
になっていました。
なぜavaluation-left
が左に寄らないのでしょうか?
教えていただけるとありがたいです。よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー