画像のように、ulタグで画像を囲んだ時にできる黄色い隙間をなくすにはどうすれば良いのでしょうか。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <title>サンプル</title> 5 <link rel="stylesheet" type="text/css" href="style8.css"> 6</head> 7<body> 8 9<div class="boxA"> 10<h1>WORKS</h1> 11<div class="boxA-1"> 12<div class="boxA-1-1"> 13 <ul> 14 <li><img src="img/pic1.jpg"></li> 15 <li><img src="img/pic1.jpg"></li> 16 17 </ul> 18</div> 19<div class="boxA-1-1"> 20 BBBB 21</div> 22<div class="boxA-1-1"> 23 CCC 24</div> 25<div class="boxA-1-1"> 26 DDD 27</div> 28</div> 29</div> 30 31</body> 32</html> 33 34 35body { 36 margin: 0; 37 margin-right: auto; 38 margin-left: auto; 39 width: 70%; 40 41 42} 43 44h1 { 45 margin: 0; 46 text-align: center; 47 color: #fff; 48 padding-top: 20px; 49 padding-bottom: 20px; 50} 51 52.boxA { 53 background: #59676A; 54} 55 56.boxA-1:after { 57 content: ""; 58 clear: both; 59 display: block; 60} 61 62.boxA-1-1 { 63 float: left; 64 width: 25%; 65} 66 67.boxA-1 img { 68 object-fit: contain; 69 max-height: 100%; 70 width: 100%; 71} 72 73.boxA-1 ul { 74 list-style: none; 75 margin: 0; 76 padding: 0; 77} 78 79.boxA-1-1:nth-of-type(1){ 80 background: yellow; 81} 82.boxA-1-1:nth-of-type(2){ 83 background: green; 84} 85.boxA-1-1:nth-of-type(3){ 86 background: skyblue; 87} 88.boxA-1-1:nth-of-type(4){ 89 background: red; 90}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。