質問お願いします。
人物紹介画面で左側に写真、右側に2段でテキスト入れれるようにしてるのですが、右側の2段それぞれに上になぜか空白ができます。
何が行けないのでしょうか?
ご教授お願いします。
html
1<div class="menberbox"> 2<ul style="list-style:none;"> 3 <li><div class="menberimg"> 4<img src="***画像url"> 5 </div></li> 6 <li> 7 <div class="menprof"> 8 <div class="prof1"> 9 テキストテキストテキストテキスト 10 </div> 11 <div class="prof2"> 12 テキストテキストテキストテキスト 13 </div> 14 </div> 15 </li> 16</ul> 17</div>
css
1.menberbox { 2width:100%; 3height:240px; 4margin:0 3px 0px 0; 5min-width:400px; 6border: solid 3px pink; 7} 8 9.menberbox ul li{ 10float:left; 11width:50%; 12 13margin: 0px; 14padding: 0px; 15} 16.menberimg { 17 18} 19 20 21.menprof { 22background-color:pink; 23margin: 0px; 24padding: 0px; 25} 26.prof1 { 27max-height:100px; 28 border-bottom: 1px solid #000000; 29overflow-y:auto; 30margin: 0px; 31padding: 0px; 32} 33.prof2 { 34max-height:100px; 35overflow-y:auto; 36margin: 0px; 37padding: 0px; 38}
margin: 0px;
padding: 0px;
はいろんなとこに入れて試してるから多いかもしれません。
よろしくお願いします。
ブラウザ環境はクロームです。wordpressでしています。
個別ページにhtml書き、
cssにcssを書いてます。
スクショでは.prof2 {に border-top: 1px solid #000000; を入れ
.prof2 {
max-height:100px;
overflow-y:auto;
margin: 0px;
padding: 0px;
border-top: 1px solid #000000;
}
に変更してるので線が二つあります。上の行の下のラインと下の行の上ラインとの間がそのくらいあります。消えません。
追記2
今liに何が当たってるかブラウザで調べてたらpが入ってます。コードの方ではちゃんと入ってないのですが。なぜでしょう?
下の段にはpが邪魔してて上の段には何もないけど隙間があります。
html
1 </div></li> 2<li> 3 <div class="menprof"> 4 <div class="prof1"> 5テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 6 </div> 7 <div class="prof2"> 8テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 9 </div> 10 </div> 11 </li> 12</ul> 13</div>
回答2件
あなたの回答
tips
プレビュー